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.

Is /src/assets/scss/variables your own variables file? If so, it shouldn't be in the assets folder - as it will be bundled with your app at build time - not loaded at runtime. I'll give you more info based on that. Add in some of your LoginComponent scss import code too so we can see it — Drenai
Yes, in "src/assets/scss/_variables.scss". If it shouldn't be there, then where do i put it? — Alexander Kim
Wherever you want, you could have a "styles" folder in src/app for example. — AntoineB
@AntoineB, that's a mess. What's the purpose of src/assets, it should contain assets - images, icons, styles. Don't understand. — Alexander Kim
It should contain images and icons, and maybe the CSS or JavaScript from external libraries that cannot be imported using NPM. Your CSS is part of your app, and it'll be bundled with the CSS files compiled by angular when running the application. — AntoineB

Drenai Drenai · Accepted Answer · 2019-05-11T15:03:54

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

SCSS load order in Angular 7

1 Answers

Update angular.json

Update `angular.json`