CSS scope only to an entire module in Angular

Question

I am doing a lazy-loading to a module, and I want to load a CSS file when that module is loaded. The CSS file should only affect that particular module.

I can't put it on styles.css because it would affect the other modules.

Thanks!

Answer 1

I have manage to add customer style for each module by create a style file for each module and add this style file in the component stylr list

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.module.scss' , './app.component.scss' ],
})

or you can use scss impot inside the component style file

app.component.scss

@import './app.module.scss';