Tag Archives: styling

Using SCSS/SASS with AngularJS2 components

So previously, I’ve talked about how in AngularJS 2, you can include individual styles/stylesheets to be used exclusively by the respective component.

Problem is, this only natively supports CSS, which is quite a bummer.

From what I could see, there are two ways to go about this:

  1. Compile all SCSS files in the component folders, and concatenate them into one app.css
    This would mean that you will have to forego the encapsulation feature though, as there will no way for the components to know what styles are theirs.
  2. Compile all SCSS files in the component folders, save CSS files in the respective component folders, and load those generated css files instead.
    This seems to me, the more logical approach as the intended behaviour will be retained.
    Problem is, this means that your task runner will potentially be watching 100 scss files in 100 folders (or more) and compiling them. Maybe this isn’t such a big deal, I don’t know yet.
  3. Someone has also written about this at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components.
    Apparently there is a solution using the Webpack task runner. However, to me, this seems to be adding a lot of bulk to the project, especially when I am already well-versed with Gulp/Grunt, and Ionic Framework already have their SCSS compilers in place.
    If I am not mistaken, going this route will allow your angularJS 2 components to load the SCSS files directly. The runner will process the SCSS files upon request, and return them as CSS strings.

Notable Issues

It’s worth noting that having multiple independent scss files are neat and all, however, they actually add overhead to the load times. Every thing you include, be it a view template or a scss file, is an additional http request.

That’s why it is recommended to embed your html template within your component’s Typescript file using template: <h1>Hello</h1>  if the code is small and lean (which is the goal).

Styles-wise, it would be perfect if we could simply enter SCSS code into the styles attribute, and the app would be able to compile the resulting scss into css.

That would be the best solution in my opinion, and we can get rid of all these processes, although there will be similar processes happening in the background, but it will feel seamless.