how to have one style per angular module?

Question

Is it possible to have a CSS file per angular module so that the style files are not interfering?

What I want to do is to have bootstrap 3 in one module and bootstrap 4 in another, is this possible? If so, how to achieve it?

Answer 1

Generally, it's not a good practice to have different files for every module. Instead, create one global CSS file and every CSS per component.

But you can create One per module as per your requirements

Create Single CSS file for every module level and import that CSS file into every component of that module's styleUrls array, as it accepts multiple files too. like this -

@Component({
  ....
  styleUrls: ['./mycomponent.css', 'module-global.css']
})