SCSS load order in Angular 7

Question

Global styles are going in to "src/styles.scss", contents of styles.scss:

// bs variables
@import '../src/assets/scss/variables';

// importing bootstrap
@import '~bootstrap/scss/bootstrap';

i import there BS's "_variables.scss", then in my component "Login" (login.component.scss), i'm trying to use a variable from "_variables.scss", but it won't see this variable.

What load order of scss files are in angular? Or what's the correct place to import variables file?

UPDATE 1

Contents of login.component.scss:

#login {
  background-color: $blue;
}

UPDATE 2

as @Drenai pointed me regarding assets directory, i've placed my _variables.scss under src/_variables.scss, then imported it in styles.scss, but variables won't work in my login.component.scss if i don't explicitly import it there. But why do i have to import it in a login.component.scss if it's imported in styles.scss already?

UPDATE 3

Just found and old issue: https://github.com/angular/angular-cli/issues/3700 seems like there's no other way, we have to import variables in every component. Or use CSS variables.

Answer 1

It's good to have a styles folder: I've used the following structure a good bit:

src/styles
> _variables.scss
> styles.scss

Create a styles folder, and put your main styles.scss in there, and add:

@import 'variables.scss'; // includes font-awesome path

In your login.component.scss, also use @import 'variables.scss';

Update angular.json

You'll need to replace any lines that have src/styles.scss with src/styles/styles.scss

Depending on what you have in your angular.json already you might need to add the following to the options of the "architect" and "test" sections:

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },

Note: you wouldn't put it in assets folder because that's for static assets, such as images that you need to reference yourself. Your styles will automatically be bundled into a single file and added dist folder during the Angular build process

Angular Wiki: There's a good article about this on the Angular CLI Stories page