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 am using Angular v8.1.2 with SCSS as the style format, and found the global syles.scss is not working.

In angular.json, it is:

    "styles": [
      "src/styles.scss",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

After google search, I found the reason from https://github.com/angular/angular-cli/issues/10855:

The issue only reproduces if we have more than one non-empty file in projects.architect.build.options.styles setting of angular.json.

My solution: Remove the "node_modules/bootstrap/dist/css/bootstrap.min.css" entry from the styles array, leaving "src/styles.scss" as the only file in the [ ], and then open the styles.scss, and adding the following line at the top of the content:

@import "node_modules/bootstrap/dist/css/bootstrap.min";