覆盖bootstrap变量angular-cli

时间:2017-02-08 22:23:51

标签: twitter-bootstrap angular sass angular-cli

我有一个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项目中做到这一点?

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:-1)

如果您通过以下方式将bootstrap.scss导入主style.scss文件,它应该可以正常工作。

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