James Crinkley James Crinkley - 9 months ago 197
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

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

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


"apps": [
"styles": [


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


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

Answer Source

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