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

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 on 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:

     |   \---fonts
     |       \---Roboto
     |            \---css
     |                  Roboto.css
     |            \---fonts
     |                  ......
     |                  Roboto-Fonts.eot
     |                  ......          

What i tried to do:

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

  2. Make custom config for this module as here
    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:


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


rebaseTo: "/www"

Noone had the same problems?

i’ve just encountered this issue too. Trying to work out how to fix it. I also imported fonts like you.

Perhaps not the right way to resolve it, but I just added the font stylesheet directly in the index.html file before the main.css file is declared.

<link href="assets/fonts/stylesheet.css" rel="stylesheet">

I’d already solved it. Check the app-scripts github.