Menu
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?
449
There are several ways to add styles to a component: By setting styles or styleUrls metadata. Inline in the template HTML. With CSS imports.
Define styles in the CSS module, and import the module into the components that you want to share styles. You can import one or more CSS modules. The imported style rules are applied to the template just like non-imported style rules.
With the help of Angular CLI, you can install CSS or SCSS on your project and start working on that in a suitable way. If you are working with the CSS or SCSS in your angular project then it is very easy for you as compared to most other frameworks.
With a CSS class Angular usually has a style file that allows you to apply classes globally in your application. You can create a class there and apply it to your components, and that you can do it in two ways, using host property, and using HostBinding decorator.
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']
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
