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


#1

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.


#2

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


#3

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:
github.com/bunny1985/angularSeed2 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