Clean-css error while building an app: Broken @imports with relative paths

[ArkhipovK]

Hi guys, i have a problem with building an application via ">ionic build android --prod" command. The cause of the problem is clean-css module, which throws an error with relative paths in @import statements.

The @imports were used:

    @import '../assets/fonts/Roboto/css/Roboto.css';
    @import '../assets/fonts/RobotoCondensed/css/RobotoCondensed.css';

The hierarchy of the www folder:

\---www
     \---assets
     |   \---fonts
     |       \---Roboto
     |           \---css
     |                  Roboto.css
     |           \---fonts
     |                  ......
     |                  Roboto-Fonts.eot
     |                  ......          
     \---build
             main.js
             main.css
             ....

What i tried to do:

1. Make absolute paths in imports: @import '/www/assets/fonts/Roboto/css/Roboto.css'; This builds without error at least.

---

2.1 Make custom config for this module as here https://ionicframework.com/docs/v2/resources/app-scripts/
2.2 Then, in custom config i tried to use "rebaseTo" option:

 module.exports = {
     /**
      * sourceFileName: the file name of the src css file
      */
     sourceFileName: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

     /**
      * destFileName: the file name for the generated minified file
      */
     destFileName: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

     rebaseTo: "/www/build"

   };

But it had no effect at all. I tried various combinations, e.g:

main.css:

@import 'assets/fonts/Roboto/css/Roboto.css';
@import 'assets/fonts/RobotoCondensed/css/RobotoCondensed.css';

config:

rebaseTo: "/www"

or

main.css:

@import './assets/fonts/Roboto/css/Roboto.css';
@import './assets/fonts/RobotoCondensed/css/RobotoCondensed.css';

config:

rebaseTo: "../../../../www"

[ArkhipovK]

Ok, while i were working on the problem, i noticed, that i'd been using outdated app-scripts version 0.47. Therefore i'd updated it to current 1.0.0 version. Another mistake is that i was trying to configurate clean-css as 4.x version, but in latest version of app scripts the version of this module is 3.x. Also i figured out that i was using wrong configuration structure.

Finally, i've gotten some results, after solving all of these mistakes.
With option that allows to ignore the @imports, my biuld was succeeded:

module.exports = {
    options:{
      processImport:false
  }
};

but

with 'relativeTo' option, i'm still getting an error

module.exports = {
    options:{
      root:"/www",

      relativeTo: "/www/build",

      target: "/www/build/main.css"
  }
};

What i'm doing wrong?

[ArkhipovK]

Ok. Working on the promlem a bit more time, i figured out, that root for clean-css module is not the project folder. After i used environment variables for paths, the build had succeeded.

module.exports = {
    options:{
      relativeTo: process.env.IONIC_ROOT_DIR+"/www/build",

      target: process.env.IONIC_ROOT_DIR+"/www/build/main.css"
  }
};

Is it able to include this config in app-scripts master project?

[tHesTx]

What worked for me:

1. @import '/www/assets/animations/animate.css';
2. include directly in index.html:

It's a very big difference in load and run speed(second is better) between: ionic build android and ionic build android --prod

[ArkhipovK]

This will have been working until there is no relative urls inside animate.css
(sorry for ridiculous tense)

[tHesTx]

Yep, there's no other import in animate.css - but I've had the same error when building "--prod", for normal build no such error(not sure why)

[ArkhipovK]

for normal build no such error(not sure why)

Obviously because clean-css was included only in production build.

[huh66]

Similar problem: Error: Broken @import declaration of "./../assets/css/glyphicons.css"

Adding

module.exports = {
    options:{
      processImport:false
  }
};

to ./node_modules/@ionic/app-scripts/config/cleancss.config.js works for me.
Thanks to ArkhipovK