James Crinkley James Crinkley - 29 days ago 34
Sass (Sass) Question

Accessing bootstrap scss variables in angular 2 component

I'm working on a new Angular2 project built using Angular CLI and have configured the project to use SCSS. I have Bootstrap 4 successfully loaded into my

styles.scss
file however if I try and access any of Bootstrap's (or my own variables defined in
styles.scss
from within a component I get
Undefined Variable
build error.

Are the style files for components compiled before the main entry in the
styles
node of
angular-cli.json
? How can I make is so that any variables defined at that global level are available to all components in the application? Thanks!

angular-cli.json

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


styles.scss

// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../../node_modules/bootstrap/scss/bootstrap";


component

.navbar {
background: $brand-primary; // Undefined variable here
}

Answer

Just because you are importing the bootstrap 4 into your styles.scss doesn't mean your .scss files on your components have access to that.

On your component.scss you have to import the bootstrap variables.

@import '~bootstrap/scss/_variables.scss';

.navbar {
  background: $brand-primary; // No more Undefined variable here
}
Comments