如何使用angular-cli自定义bootstrap 4 [英] How to customize bootstrap 4 using angular-cli

问题描述

我有一个使用angular-cli 1.0和Bootstrap 4-alpha6的Angular 4应用程序. 我想自定义Bootstrap 4.更改主按钮的颜色.

I have an Angular 4 application using angular-cli 1.0 and Bootstrap 4-alpha6. I want to customize Bootstrap 4. E.g. change the color of the primary buttons.

它必须是一个面向未来的解决方案.这意味着我的自定义必须在以后的引导升级中幸免.

It must be a future proof solution. That means my customizations must survive upgrades of bootstrap at a later point in time.

我通过以下方式集成了引导程序: 将"bootstrap": "4.0.0-alpha.6",添加到我的package.json文件中的依赖项. 此外，我还添加了

I have integrated bootstrap by: Adding "bootstrap": "4.0.0-alpha.6", to the dependencies in my package.json file. Furthermore I added

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

至angular-cli.json中的"apps".

to "apps" in angular-cli.json.

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

My first try was to create a new file called style.scss, put it into src/assets and also reference it in angular-cli.json.

内容可能如下所示:

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

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

运行ng serve时，应用程序可以正常编译，但看不到任何更改.

When running ng serve the application comiles fine but I do not see any changes.

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

Did I even start in the right direction? How would I properly customize bootstrap buttons/styles via sass in a clean angular-cli workflow?

您可以在此处找到源: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

You can find the source here: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

推荐答案

您尝试更改的值$body-bg& $body-color是SASS值，不是CSS值.

The values you're attempting to change $body-bg & $body-color are SASS values, not CSS values.

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

So you will need to reference the SASS files not the CSS file.

将默认样式文件从styles.css更新为styles.scss，然后在该文件中...

Update the default style file from styles.css to styles.scss and in that file...

// 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'

您可以在此处了解更多信息.

You can read more here.

这篇关于如何使用angular-cli自定义bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！