Localised Sass (.scss) files

Ionic Framework ionic-v3
1

In Angular2, you specify the styles of a component with the stylesUrls in the @Component decorator. This makes the .scss files local to the component, so styles do not conflict.

However, with Ionic, it seems like this does not work. Instead, ionic-app-scripts bundle all the .scss files into one global file, which causes conflicts. I cannot use styleUrls as this causes errors:

image

Is there a way to use styleUrls property in the @Component selector?

2

Hi,
in case you’re still looking for a solution, I can provide one.

It is possible to use the styleUrls property. You have to extend the default ionic webpack configuration. For this I would suggest to define a custom webpack config file where you merge the default configuration with your own modifications.

Your custom config should contain:

  • An additional typescript loader - the angular2-template-loader. It changes the styleUrls property to inline styles. So there is no problem any more.
  • You also need a scss-loader. Otherwise the angular2-template-loader can’t import the .scss files.

I hope this can help you.