Angular: @extend vs. global style in styles.scss

Question

I've an angular app which uses SASS.I want to style a certain class of buttons in specific way. This class of button is used throughout my app in certain components. I want to know which would be better way to write the common style for them. I know using @import and @extend will copy my common styles into each component's scss right after compilation? So will it affect the size of my application as well it's performance?

Another idea I have is to go for global stylesheet, styles.scss.

I want to know which would be better in terms of maintenance and performance.

Answer 1

indeed, @import and @include will copy the code into your component style, so your bundle size will grow.

Using @extend only copy the CSS selector of your class (instead of its content), so your bundle will also grow, but less than using @include. A downside of @extend is you can't use a @media queries with an @extend.

The lightest solution is using styles.scss, which can obviously be splitted into multiple files, which would be imported into your styles.scss. That is how I personnaly use a Design System in all my angular apps.

I only import variables and mixins in my components. All global stuff is handled in styles.scss