Angular 2 - Global CSS file

Question

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?

this is the right way to proceed. It should be working. When you say it does not work, what happen precisely ? All the sub component button differ ? What is the aspect of a button if you add a button in your app component template. Does it have the right aspect ? — chaiyachaiya, Dec 14 '16 at 12:44

Parziphal · Answer 1 · 2018-11-05T17:49:56.037

84

Just write your global styles in your src/styles.css file. That file will be added to styles.bundle.js when you run ng build.

If you'd like to add more style files, you can do so in your .angular-cli.json (or angular.json for Angular 6+) file. In that file you'll see an array called styles, with a single item by default which is styles.css (or src/styles.css in Angular 6). You can even include .scss files.

Using SCSS

If you want to use SCSS, simply change the extension of your src/styles.css file to .scss, then reflect the change in your .angular-cli.json (or angular.json in 6+) file as well, by editing the entry in the styles array.

Make Angular use SCSS by default

When creating components, you'd like Angular to create .scss styles files instead of .css. Here's how:

Angular 7

Starting from Angular 7, when you create an app with ng new appname, you will be prompted which stylesheet format you'd like to use, so you just choose SCSS (source). It seems like here ends the need to manually configure Angular to use SCSS.

Angular 6

Add this at the end of your angular.json file (source):

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Angular 4 and lower

Locate this by the end of your .angular-cli.json file, and change the value of styleExt to scss:

"defaults": {
  "styleExt": "css",
  "component": {}
}

edited Nov 05 '18 at 17:49

answered Apr 24 '17 at 11:11

Parziphal

6,222
4
34
36

1

This is an important addition to this question - as it is more relevant with new versions of Angular. I recently created a new project with a new installation of the Angular CLI and (by habit) manually included the CSS import (as per the chosen answer in this question) which led to an error in the browser console. Once I removed the manual CSS import statement in the HTML, I noticed that the CSS styling from styles.css was being applied. It was unfortunate I did not see this answer prior to starting the new project... – dandev91 Jun 16 '17 at 04:43
2

At the time of this question, this wasn't the right answer though. Do I update the 'right answer' to accommodate for the update to Angular? *Technically* the question referred to Angular 2... – dandev91 Aug 16 '17 at 06:43
2

What if you are not using angular-cli with Angular 4? – Myk Willis Nov 05 '17 at 17:13
1

I was able to just add `"../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css"` to my `.angular-cli.json` seems to work fine. – Tarion Nov 28 '17 at 14:39
@fila - the question doesn't have a version of angular specified. I'd recommend you change the answer to this one to better help future developers, and if more changes further in the future, try to keep your quesions up-to-date. SO would be even more helpful if everyone were to do this! – Matt DeKrey Apr 05 '18 at 17:56
2

Since app component is the main component, you can add multiple styles there. Like: styleUrls: ["styles1.css", "styles2.css"], – Niladri Banerjee - Uttarpara Apr 20 '18 at 12:50
None options worked for me and I used ´@import url('../../../shared/myStyle.scss');´ – George Wurthmann Jul 18 '21 at 01:04

score 28 · Accepted Answer · answered Oct 26 '16 at 23:34

28

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

answered Oct 26 '16 at 23:34

80sax

583
4
13

5

I completely missed that the Angular 2 CLI actually creates and includes a 'styles.css' file as a global CSS script within the index.html file. I just opened the file to see "/* You can add global styles to this file, and also import other style files */". Thanks axl_80. – dandev91 Oct 26 '16 at 23:49
2

Your welcome, I'm glad to know I could help you. Good luck in your project ;) – 80sax Oct 27 '16 at 00:30
What if there is no html file. I am creating a Angular library. – UniSound Waterloo Jun 13 '17 at 14:22
@UniSoundWaterloo I don't think you should use global css in a library. – Amir Savand Feb 21 '19 at 05:50
cann alse be added to styles.css like so @import 'bootstrap/dist/css/bootstrap.css'; – Developer Apr 13 '20 at 22:58
using styles.css should be the solution – Alex G Sep 28 '21 at 13:02

score 4 · Answer 3 · answered May 04 '19 at 19:20

4

You can use:

Add main.css
Open styles.css in main folder
Add this line (@import 'main.css';)

answered May 04 '19 at 19:20

Ahmad Aghazadeh

16,571
12
101
98

Why would you do it like this instead of just adding your styles to style.css? – Neville Mar 25 '20 at 11:17
I think it good as the code looks more organized like you want to make particular styles for text field radio buttons dropdown so you can make individual css files and can import here and I think by importing here the class residing in these files can be accessed in whole application. :) – kushal Baldev Sep 07 '20 at 06:26