CODEWITHSUNDEEP
cssangularangular-material2
Sumit Agarwal
Sumit Agarwal

Reputation: 4306

Using common CSS across all modules, Angular 2 RC6

I am willing to use a common css, i.e my root css across all modules of app. This can be achieved by adding css path to styleUrls tag in all components individually. Is there any other way, like including css at NgModule level?

Upvotes: 2

Views: 1110

Answers (2)

Manolis
Manolis

Reputation: 891

I was wondering the same today. There is no functionality for module-wise CSS, so I ended up using Sass imports to achieve what I needed to do.

Please note that although it is repetitive, it is better than having an app-wide CSS, which beats the purpose of encapsulation.

Given the following file structure:

my-component/
 ├──first/
 │   ├──first.component.ts     * first component
 │   ├──first.component.scss   * first component's SCSS
 │   └──...                    * first component's module, html etc.
 │
 ├──second/
 │   ├──second.component.ts    * second component
 │   ├──second.component.scss  * second component's SCSS
 │   └──...                    * second component's module, html etc.
 │
 ├──my-component.module.ts     * my component's module 
 ├──my-component.routes.ts     * my component's routes 
 └──_shared.scss               * the shared partial SCSS

I import the _shared partial into my first.component.scss and second.component.scss, like so:

@import '../shared';

Upvotes: 1

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657118

If you add the styles to the index.html page, they are applied to all components, but view encapsulation emulation is not applied.

Besides that I don't think Angular2 itself provides anything.

Upvotes: 1

Related Questions