[英]How to customize bootstrap 4 using angular-cli
I have an Angular 4 application using angular-cli 1.0 and Bootstrap 4-alpha6. 我有一个使用angular-cli 1.0和Bootstrap 4-alpha6的Angular 4应用程序。 I want to customize Bootstrap 4. Eg change the color of the primary buttons.
我想自定义Bootstrap 4.例如,更改主按钮的颜色。
It must be a future proof solution. 它必须是一个面向未来的解决方案。 That means my customizations must survive upgrades of bootstrap at a later point in time.
这意味着我的自定义必须在以后的某个时间点升级引导程序。
I have integrated bootstrap by: Adding "bootstrap": "4.0.0-alpha.6",
to the dependencies in my package.json file. 我已经集成了bootstrap:将
"bootstrap": "4.0.0-alpha.6",
到我的package.json文件中的依赖项中。 Furthermore I added 此外,我补充道
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
to "apps"
in angular-cli.json. 到angular-cli.json中的
"apps"
。
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. 我的第一个尝试是创建一个名为style.scss的新文件,将其放入src / assets中,并在angular-cli.json中引用它。
The content could look like this: 内容可能如下所示:
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
$body-bg: $gray-dark;
$body-color: $gray-light;
When running ng serve
the application comiles fine but I do not see any changes. 运行
ng serve
,应用程序comiles很好但我没有看到任何更改。
Did I even start in the right direction? 我是否开始朝着正确的方向前进? How would I properly customize bootstrap buttons/styles via sass in a clean angular-cli workflow?
如何在干净的angular-cli工作流程中通过sass正确地自定义引导按钮/样式?
You can find the source here: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular 你可以在这里找到源: https : //github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular
The values you're attempting to change $body-bg
& $body-color
are SASS values, not CSS values. 您尝试更改
$body-bg
和$body-color
的值是SASS值,而不是CSS值。
So you will need to reference the SASS files not the CSS file. 因此,您需要引用SASS文件而不是CSS文件。
Update the default style file from styles.css
to styles.scss
and in that file... 将
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'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.