angular-cli how to add global styles?

Question

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

Answer 1

I had the same problem and found this example from before there was even sass/less support in the cli. I suppose the current build of the cli (1.0.0-beta.5) may only compile component level sass, and may even ignore .css in the /src folder. I managed to put global *.css in the public/ folder and have it copied over to /dist, but couldn't get the same behavior from /src and preprocessors didn't seem to compile by default. I suppose that may be by design and IMHO somewhat counterintuitive. Angular cli is luckily built on top of Broccoli and it may be well worth the time and effort to learn how to customize the build using Broccoli like in the example below:

Here is a copy of the angular-cli-build.js I ended up with.

'use strict';
/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var _ = require('lodash');
var glob = require('glob');

module.exports = function(defaults) {

  let sourceDir = 'src';
  let app = new Angular2App(defaults, {
      sourceDir: sourceDir,
      sassCompiler: {
        includePaths: [
          'src/style'
        ]
      },
      vendorNpmFiles: [
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'zone.js/dist/*.js',
        'es6-shim/es6-shim.js',
        'reflect-metadata/*.js',
        'rxjs/**/*.js',
        '@angular/**/*.js'
      ]
    });
    let styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
        sassFile = sassFile.replace('src/', '');
        return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
    }));
    return mergeTrees([app, styles], { overwrite: true });
};

Answer 2

Add scss to styles array of angular-cli.json.

Answer 3

Sep 2019:

Most other posts are old.

File: \angular.json
Key : projects > myProjectNameHere > architect > build > styles

"styles": [
    "src/styles.css",
    "node_modules/font-awesome/css/font-awesome.css",
    {
        "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
    }
],

File: src/styles.css

/* You can add global styles to this file, and also import other style files */
/* That is, have put css that is common for all pages in this file.  */

body {
  font-family: "Ubuntu", sans-serif;
}

With above two things, the css is applying fine to all pages.

So, nothing new to be done if you have Angular 8 or above.
If you have an issue, then you only need to clear cache (or, do Ctrl + Shift + R )

Answer 4

I've been using the following strategy (though I haven't seen any official solutions on this from the angular-cli team, so there may be a better method out there):

If all of my src files are in src/app/..., I place an app.scss file in the root ./app directory. That then gets compiled to css automatically with the current build configuration, so I can include it in my index.html as such:

<link rel="stylesheet" type="text/css" href="app/app.css">

If your file structure is different for whatever reason from the default CLI file structure, just make sure the app.scss file is included in the same directory where your main app component lives. I like this technique because it means I don't have to alter the build, making it less painful to update the project in the future.

Answer 5

I know this is too late, but as things keep changing. As of March 16, 2017

this worked for me for the cli.

<link rel="stylesheet" href="src/styles.css">

Answer 6

While I think @filoxo's answer is the documented solution, something like the following works for me as well, and might make it more clear which component needs it:

require('style!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');

Or when using more recent versions of Angular CLI:

require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');

Or:

@Component({
    selector: 'my-component',
    styles: [require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss')],
    styleUrls: ['./my.component.scss']
})

The latter might not be allowed; maybe one should not provide both styles and styleUrls, as I'm getting "An object literal cannot have multiple properties with the same name in strict mode" and "Duplicate identifier 'styles'".