Angular, Bootstrap 4, angular-cli - where to place dependent scss and import it?

Question

See this question, which works if you have scss that does not depend on bootstrap's variables.

In my index.html:

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css"

If I then put a styles.scss into /assets folder, that has content like this:

@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}

The project fails to build:

Module build failed: 
@include media-breakpoint-up(sm) {
        ^
      No mixin named media-breakpoint-up

So my question is where do I load my own css that depends on bootstraps variables and mixins?

Answer 1

You can set the styles.scss file in the angular-cli.json:

{
  "apps": [
    {
      "styles": [
        "assets/styles.scss"
      ],
    }
  ]
}

This will automatically inject it into the head section of your output markup.

To use the Bootstrap 4 mixins, you should add Bootstrap as a project dependency:

npm install --save [email protected]

Then you can import the mixins (using the "~" to indicate node_modules root) directly in your SCSS files.

So that in your SCSS you reference bootstrap like:

@import '~bootstrap/scss/mixins';