Angular2 module level stylesheets

Question

I am designing my website in a modular structure using sass and I am willing to organise the stylesheets in such a way that I define a stylesheet at each module level(instead of component level) and then import it in all the components to keep a standard layout for the entire module.

So is this a good approach?

If yes, is there a method to export the CSS from the module.ts file to all the components. In a very similar way, the services are made available using the providers. This will save me the pain of importing the same CSS file in all the components individually.

Answer 1

So lets say we have the following structure in our angular application

+-- src |   +-- app |   |   +-- customer |   |   |   +-- customer.scss |   |   |   +-- customer.module.ts |   |   +-- product |   |   |   +-- product.scss |   |   |   +-- product.module.ts |   +-- sass |   |   +-- _common.scss |   |   +-- app.scss |   |   +-- project-level-styles.scss 

We can setup our project level sass file like so:

@import 'common';  // project level classes @import 'project-level-styles';  // module level classes @import '../app/customer/customer.scss' @import '../app/customer/product.scss' 

So in these customer.scss and product.scss I will have classes that are common throughout the many components inside that module.

It should be noted that when you create a stylesheet not at the component level and put it somewhere else like inside a module or project directory, the way angular treats those styles is different.

Angular Component Styles

Angular can bundle component styles with components, enabling a more modular design than regular stylesheets. The selectors you put into a component's styles apply only within the template of that component.

So please be aware that any stylesheets not associated with the components styleUrls array it can be applied to any element in your site (if you don't use specificity). It's not applied only to that module, so this may not be a solution for all situations, but it's something that I do for my modules, understanding this I can write my styles in that modular stylesheet to be specific to that module by targeting the root element for that module...

component vs global

In my application my customerModule has a root component called customerComponent and I have a root element in that html that has a class of:

customer-container

So inside my customer.scss I can prepend all of my styles like this:

.customer-container .info-heading {   font-size: 15px; color: #333; }  .customer-container .section-divider {   margin-top: 1em; border-top: 1px solid #dfdfdf; } 

So I can now achieve some level of specificity that keep my styles from bleeding into other project components.