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.
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';
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With