twitter-bootstrap – 如何使用angular-cli自定义bootstrap 4

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 如何使用angular-cli自定义bootstrap 4前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用angular-cli 1.0和Bootstrap 4-alpha6的Angular 4应用程序.
我想自定义Bootstrap 4.例如更改主按钮的颜色.

它必须是一个面向未来的解决方案.这意味着我的自定义必须在以后的某个时间点升级引导程序.

我已经集成了bootstrap:
将“bootstrap”:“4.0.0-alpha.6”添加到package.json文件中的依赖项中.
此外,我补充道

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

到angular-cli.json中的“apps”.

我的第一个尝试是创建一个名为style.scss的新文件,将其放入src / assets中,并在angular-cli.json中引用它.

内容可能如下所示:

@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$body-bg:    $gray-dark;
$body-color: $gray-light;

运行ng时,应用程序comiles很好但我没有看到任何更改.

我是否开始朝着正确的方向前进?如何在干净的angular-cli工作流程中通过sass正确地自定义引导按钮/样式?

你可以在这里找到来源:https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

解决方法

你试图改变的价值$body-bg& $body-color是SASS值,而不是CSS值.

因此,您需要引用SASS文件而不是CSS文件.

将styles.css中的默认样式文件更新为styles.scss并在该文件中…

// set the variables you wish to change
$body-bg:    $gray-dark;
$body-color: $gray-light;
// import in the bootstrap SASS file
@import '../node_modules/bootstrap/scss/bootstrap'

你可以阅读更多here.

猜你在找的Bootstrap相关文章