为不同的Angular模块分离SCSS

Question

Is there any way to separate scss for separate modules. In details if I have 2 modules called module_1 and module_2 and 2 scss files called module_1.scss and module_2.scss . I want my angular module_1 to load other scss except module_2.scss and similarly for module_2 I don't want module_1.scss to get loaded. How can I achieve this in angular.

Thanks in advance.

Answer 1

Since angular has styles imported at the component level, you can create module_1.scss and module_2.scss -- and then for each container-level component in the modules, add the appropriate scss file to the styles array

Example module_1 > component_foo

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

Example module_2 > component_bar

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

Because of this, I would recommend trying to group components into parent "containers" of other small/dumb child components so only the parent needs the styles imported