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
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
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
You should care about how clean your Git history is. It provides a way to communicate changes to a codebase with other developers who you are working with, but doing so requires some thought and intention. Ever seen one as clean as this?