Did you know that a wrong SCSS usage can increase the bundle size of your Angular application? And you know what this issue is, right? A performance issue!! The bigger the bundle size the more time the browser requires to download all the files and the more time it takes to paint the page.
A side note here: The CSS is render blocking which means that the browser won't render anything until all the CSS is downloaded and the CSSOM is constructed.
Having this in mind, we have to take extra care of our CSS. Don't we? :)
This is the application that we are going to use
Let's examine what we see here:
Let's see some code
Let the fun begin
The files app.componet.scss and one.component.scss require the color variables. So, we will load ALL the global styles which contain the color variables too
If we open the developer tools we will see in the Elements tab that the global styles appear two times. Which is not good at all!!
Let's expand the <style> tags
If you look closer you will notice that it has the global styles (e.g. .my-btn) and the encapsulated global styles (e.g. .my-btn[_ngcontent-pvb-c16]).
Why did that happen? Well, because we said to do so. If you remember, we imported ALL the global styles in the app.component.scss.
And this is the bundle size
Note that the second chunk is the lazy load module
Let's improve it
This time we won't import ALL the global styles in the files app.component.scss and one.component.scss but only the required ones
Let's examine again the Elements tab in the developer tools. As you can see the the global styles appear only once. Much better!!
And the bundle size is
The lazy load module has the half size!! And note that this is a very small application. Imagine the extend of it on a real life application
Do not import all the global styles in your components. You have to import only the required partial files and re-use the variables
I am an Angular GDE, content creator who loves sharing knowledge