Tag Archives: sass

SASS not working after updating NPM or Gulp

Recently ran into a fucked up issue, where a new collaborator on my project cloned the project onto their computer, ran npm install to install all dependencies, only to find that sass was not completing in gulp.

The SASS processor actually started, but simply wouldn’t finish.

SASS not running

After much troubleshooting, the conclusion was due to some dependency conflict.

After another round of hair pulling troubleshooting, I received the much dreaded: libsass bindings not found. Try reinstalling node-sass error.

In the past, reinstalling node-sass would have solved it, but turns out the problem was with the current version of Ionic, it only supported a specific version of gulp-sass.

If I ran npm ls node-sass

I would see:

The solution

Edit package.json, and change all includes of gulp-sass to version ^2.0.4

Re-install the dependency with npm

And running gulp now should have no errors, and correctly finish processing the sass method.

You’re welcome.

 

How to install and setup AngularJS 2 with SASS/SCSS and Bootstrap boilerplate easily

Hooray, AngularJS2 is officially released, which means it will officially be the tool of choice to build websites for me from now on.

Infact, I already started working on it.

Unfortunately, after many tries with various boilerplates/methods, they were all super complicated and more importantly, failed at some point of set up.

Thankfully, I found a easy and quite fool-proof way to automatically generate an angularJS2 seed project with best practises and testing all built in, SCSS/SASS support and installing bootstrap in only a few steps.

Angular-CI.

It’s funny why angular-ci wasn’t really advertised much in the angularJS docs, I only found out about it from Maximilian Schwarzmüller‘s udemy angularjs2 course.

Anyway, refer to https://github.com/angular/angular-cli to get started with angular-ci.

You can also use angular-ci to generate directives, components, what-nots.

 

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.