Override angular-cli boot variables

Question

I have an angular-cli project that I added to the bootstrap-sass package. I loaded the styles in angular-cli.json by adding the following:

"styles": [
        "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.scss"
      ]

But I want to be able to override some of the variables that the boot file has. How to do this in an angular-cli project?

Answer 1

It was pretty easy. If anyone has the same problem, I should have included the following global styles instead of loading styles via angular-cli.json:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import './shared/styles/_variables'; // my custom vars that overrides bootstrap
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Answer 2

It should work if you import bootstrap.scss into your main style.scss file as follows.

@import '<RALATIVE_PATH_TO>node_modules/bootstrap/scss/bootstrap.scss';