How does Angular handle shared SCSS imports in multiple components with regard to CSS...

I'm working on an Angular project where I have a shared SCSS file (e.g. base-button.scss) containing common styles. I import this shared SCSS in multiple components by either:

Adding it to each component's styleUrls array, or

Importing it inside each component's SCSS file.

When I run a production build (ng build --prod), I notice that component styles are bundled inside the JavaScript files rather than extracted into separate CSS files.

So my question is:

When the shared SCSS is imported in multiple components, does Angular duplicate those shared styles inside each component's scoped styles in the JS bundle, causing the bundle size to grow?

Or does Angular detect and deduplicate these shared styles to avoid duplication in the final bundle?

For .e.g

@Component({
selector: 'app-component-a',
template: `<div class="component-a shared-style">Component A</div>`,
styleUrls: ['./base.scss', './component-a.component.scss']
})
export class ComponentA {}

@Component({
selector: 'app-component-b',
template: `<div class="component-b shared-style">Component B</div>`,
styleUrls: ['./base.scss', './component-b.component.scss']
})

export class ComponentB {}


For example, if I add base.scss to the styleUrls of multiple components, will the final bundle size increase because all the CSS rules from base.scss are included multiple times?

Continue reading...