Ionic sass per component. Sass compilation. how to change? Ask


Hi I’m new in Ionic and I’ve noticed that styles are not processed the same way as in regular angular 2.0 app.

What I want is actually ng2 behaviour, where I can define webpack loader to handle sass files instead of one global “main.css” thaty appears “magically” How can i disable this, change configuration etc.

I have allready ejected webpack configuration to project folder and changed package.json:

  "config": {
    "ionic_bundler": "webpack",
    "ionic_webpack": "./webpack.config.js"


I need more to support custom sass compilation.


Why can’t you just have a per-component scss file in the same directory as your other component files?


The goal is to use additional loader during “scsss” processing.
In details I want to use resolve-url-loader, which I’ve been successfully using in my previous ng2 projects and earlier in angularjs 1.5.
In my opinion keeping resources that are not shared across components in a global directory “breaks encapsulation”. I want to keep them in this same folder as ts, html and css (or in folder resources in that directory).
It was realized for example here:

and here: for angular 2
basicaly. Instead of :
background: url(/assets/bg.jpg) no-repeat center center fixed;
I want to have:
background: url(./resources/bg.jpg) no-repeat center center fixed;
and i want webpack to do the rest of work