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

发布时间：2020-12-18 00:06:07 所属栏目：安全来源：网络整理

导读：我有一个使用angular-cli 1.0和Bootstrap 4-alpha6的Angular 4应用程序. 我想自定义Bootstrap 4.例如更改主按钮的颜色. 它必须是一个面向未来的解决方案.这意味着我的自定义必须在以后的某个时间点升级引导程序. 我已经集成了bootstrap：将“bootstrap”：

我有一个使用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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!