fila fila - 1 month ago 34
CSS Question

Angular 2 - Global CSS file

Is it possible to add a global CSS file to Angular 2?
At the moment I have many different components that have the same button styling - but each of the components have their own CSS file with the styling. This is frustrating for changes.

I read somewhere on Stack Overflow to add:

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None //add this
})


So I added the ViewEncapsulation lines in the root component, then added the CSS styling to the root app CSS (app.component.css) and removed the CSS styling from individual component CSS files, and it did not work.

Surely there is a way to add a global CSS file? Do I need to add something to the individual components to make them access the global CSS file?

Answer

You can simply import the css in the main html file.