Scss in Ionic2 RC.0 are unclear

Is there any documentation somewhere about the scss in Ionic2 RC.0?

How does it work?
How to include global.scss? Should global.scss include all other scss (the files from each pages) or not?
Are each scss being independent from each other or is it still on big scss with everything?
How to include third party library scss properly?

I mean it’s really unclear for me. It seemed I fixed it yesterday, wake up this morning, start my app and it look like … because some scss files I have seems to don’t be included anymore…

And about the third party library I manage do to it, but at runtime, every time I change something in a scss, the watch start a new build of the scss and told me then that the third party libraries scss aren’t found anymore, so every time I’ve to start my server again


OK, here’s what worked for me.

I had some global scss in a file named app.scss next to app.ts.

I moved them to src/theme/global.scss - it didn’t work (the global changes did not happen, even though the compiler did note that a css change was re-compiled).

But when I got rid of global.scss and returned the file app.scss with the same declarations next to app.ts, it did get loaded and the globals were called.

In summary:

  • yes, it seems every scss file in a subdirectory of src gets concatenated into one big scss file that is then compiled
  • for now, do not use global.scss
  • there are some changes in the DOM elements used in ionic built in components, e.g. tabs changed completely, which means some of your scss selectors may break and need to be changed

NOTE: this solution above may change if the global.scss inclusion problem ever gets fixed.

I totally agree that the documentation is super unclear. I tried to submit a PR to the changelog that included the information about the global.scss but it was removed. In short, there is a bug right now that prevents global.scss from working as expected, however it has already been fixed and is slated for the RC1 release.

1 Like