angular-cli how to add global styles?

Issue

I created a global style sheet using Sass and put it in the public/style/styles.scss. I only specify a background color.

In the index, I added a link to it: <link rel="stylesheet" href="style/styles.css">

The background color does not work on the body tag. Upon inspecting the body tag I can see that the background-color was applied but overruled by scaffolding.less:31

What I am doing wrong?

Solution

As of the beta.14 release of the CLI (which uses Angular 2.0 final), a global stylesheet can be linked inside angular-cli.json under the “styles” key. This is a reference to a file relative to the src/ directory, which is style.css by default.

Leveraging this method you could:

  • Copy the global styles into src/styles.css
  • Use CSS imports to import external rules into styles.css
  • Add more global styles via the apps[0].styles property in angular-cli.json

See also Global Styles in angular-cli‘s wiki.

Answered By – filoxo

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.