Ionic-app-scripts: [0.0.43] Android/Rollup production build output is missing custom CSS

Created on 11 Nov 2016 · 8Comments · Source: ionic-team/ionic-app-scripts

Short description of the problem:

When I build my app using ionic run android using Rollup as the bundler, the app's custom CSS is missing and everything looks bad.

I am currently seeing this issue on Windows 10, so that may be relevant. I have attempted to replicate this on iOS with my Mac, but that seems to work fine. I have not tried Webpack on either system. I have tested this on @ionic/[email protected] and everything works correctly.

What behavior are you expecting?

The app's custom CSS should be included in the Android package.

Steps to reproduce:

Create a new project (ionic start test --v2 --ts)
Change the bundler to Rollup.
Install @ionic/app-scripts/@0.0.43
Edit one of the page stylesheets with something obvious. For my test, I added the following to src/pages/home/home.scss:

page-home {
    .content-ios,
    .content-md {
        background-color: red;
    }
}

Run the app on an android device (ionic run android). For my example, the background of the home page should be red, but it will be white instead.

insert any relevant code between the above and below backticks

Which @ionic/app-scripts version are you using?
0.0.43

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Source

JustinPierce

Most helpful comment

It's caused by bundle.modules of rollup, the path on Windows is something like \rootpath\path\ but not D:\rootpath\path.
So the finding in replace logic will not work. ( https://github.com/driftyco/ionic-app-scripts/blob/master/src/sass.ts#L163 )
Wish this info will help you guys to fix this bug.

iron9light on 3 Dec 2016

👍2 😕1

All 8 comments

Ever since they moved to 0.4+ i am also having problems with roll-up.

ganySA on 16 Nov 2016

Same problem. with both 0.0.43 & 0.0.44
ionic-app-scripts build --bundler webpack will output the right css.

iron9light on 17 Nov 2016

i am having the same issue with 0.0.46 and rollup, with webpack works fine

salimchemes on 29 Nov 2016

iron9light on 3 Dec 2016

👍2 😕1

Our temporary solution was adding the following line to sass.ts:

function addComponentSassFiles(componentPath: string, collectedSassFiles: string[], context: BuildContext, sassConfig: SassConfig) {
  let siblingFiles = getSiblingSassFiles(componentPath, sassConfig);

  if (!siblingFiles.length && componentPath.indexOf(sep + 'node_modules') === -1) {

    // if we didn't find anything, see if this module is mapped to another directory
    for (const k in sassConfig.directoryMaps) {
      if (sassConfig.directoryMaps.hasOwnProperty(k)) {
        var actualDirectory = replacePathVars(context, k);
        var mappedDirectory = replacePathVars(context, sassConfig.directoryMaps[k]);

        componentPath = path_1.resolve(componentPath); //Line added
        componentPath = componentPath.replace(actualDirectory, mappedDirectory);

        siblingFiles = getSiblingSassFiles(componentPath, sassConfig);
        if (siblingFiles.length) {
          break;
        }
      }
    }
  }