Angular2 module level stylesheets

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.

So is this a good approach?

Its subjective. Angular modules help organise an application into cohesive blocks of functionality. Would I want different styles for different blocks functionalities? Highly unlikely.

Is there a method to export the CSS from the module.ts file to all the components.

No. Its only supported at component level. The workaround would be to have single css file referred by all the module components. Then again a good practice would be to modularise the css and use them at component levels.

Yes. Definitely approach is good to have different style sheets for each component. Even Angular CLI is following the same approach. You can have a look and get hands on: LINK

So is this a good approach?

Yes this a perfect approach when it comes to arranging file structure for Angular app.

If yes, is there a method to export the CSS from the module.ts file to all the components.

By default Angular CLI doesn't give any stylesheet for module and it make sense as well. Why you need stylesheet at module level?You can add styles related to component in component level stylesheet and additionally if you want you can have one stylesheet at project level where you can add all common styles for project.