Angular `ng serve`: importing SCSS files in the global styles.scss vs including them in angular.json

#angular #webpack #webdev

With this article I'd like to share a tip I've discovered to quicken the SCSS rebuild time when using ng serve and several 3rd party SCSS files. By rebuild time, I mean the time it takes for webpack to parse the modifications in the project's SCSS files and update the web app whenever there's a modification in said SCSS files.

While working on Angular projects, whenever I had to include external SCSS files (e.g. Bootstrap, FontAwesome) I always @import'ed them in my global styles.scss file.

Example from a recent project:

@import "global-styles/fontawesome.scss";
@import "global-styles/bootstrap.scss";
@import "global-styles/nebular.scss"; // This file calls nb-install() to init Nebular's theme system, after setting the relevant variables and overrides for my theme

// [My own SCSS rules below]

This worked perfectly, until I had to edit one of my global SCSS rules. Every modification triggered a rebuild of the whole styles.scss, and that took somewhere along 15 seconds every time.

By selectively commenting out some of the imports, I saw that the biggest time-consumer was nebular.scss, I guess because of their theme system. Without it, my rebuild time was ~3 seconds.

I did not want to wait for 15+ seconds for every small SCSS modification, especially because 99% of my modifications did not have anything to do with the SCSS files I was importing! I couldn't find much on the internet apart from this StackOverflow question (https://stackoverflow.com/questions/55309150/importing-styles-in-angular-json-vs-importing-in-styles-css), however this made me think that, since having multiple entries in the styles section of angular.json is basically the same as adding multiple independent CSS files to the app, maybe I could split my SCSS files in such a way that Webpack could be smart about it and only recompile some parts of them whenever a change was detected.

In my case, the change was simple. Since the 3 files were independent one from the other (i.e. no file was referencing the other) I simply removed the 3 import lines and I moved them to my angular.json styles section:

"styles": [
              "src/global-styles/fontawesome.scss",
              "src/global-styles/bootstrap.scss",
              "src/global-styles/nebular.scss",
              "src/styles.scss"
            ],

By doing this, whenever I had to change something, Webpack only rebuilt the relevant SCSS file where the change happened. If I had to change something in the nebular.scss file I would have to wait ~13 seconds, but if the change was, for example, in the styles.scss file, the rebuild time went down to 800ms! I did not observe any changes in the app, so I'd say that, CSS wise, the output should be the same as the @import approach.

Of course, this approach only works if we have several independent SCSS files, but this should be the case whenever we import external SCSS dependencies in our project. This could also be used in chase the project's SCSS files start to become heavy in terms of build time. Whenever the files can be isolated with their own dependencies, then they could be moved in angular.json instead of being imported in the main styles.scss file.