如何使用 angular-cli 自定义引导程序 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

推荐答案

您尝试更改的值 $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 自定义引导程序 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！