override bootstrap variables angular-cli

Question

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

"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 bootstrap has. How can I do this in a angular-cli project?

Answer 1

This was actually rather easy. If anyone has the same problem what I did was to include the following as 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

如果您以以下方式将bootstrap.scss导入到主style.scss文件中，则该方法应该起作用。

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