覆盖引导变量angular-cli

Question

我有一个angular-cli项目，我已经添加了bootstrap-sass包。我已经在angular-cli.json中加载了样式，添加了以下内容：

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

但是我希望能够覆盖bootstrap拥有的一些变量。我如何在一个angular-cli项目中做到这一点？

Answer 1

这实际上相当简单。如果任何人有同样的问题，我所做的就是包含以下内容作为全局样式，而不是通过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';