如何使用angular-cli&ng-bootstrap自定义Bootstrap 4 SCSS变量？

Question

我正在使用angular-cli构建一个Angular 4应用程序.我想使用ng-bootstrap来包含Bootstrap 4.但是我也想在我的构建中自定义Bootstrap的scss变量,如http://v4-alpha.getbootstrap.com/getting-started/options/所述.

我怎样才能做到这一点？

Answer 1

接受的答案不再适用.如果你像我一样,你是一个新的角色用户,试图在你的项目中添加bootstrap并遵循angular-cli wiki:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap(as贴在接受的答案中).

这里讨论的问题是:https: //github.com/twbs/bootstrap/issues/23112

简短版本:主题颜色现在位于嵌套对象中,因此$ brand-primary之类的东西不再适用 - 我们现在必须更改$ theme-colors.它有效,但我们现在必须替换整个对象,即使我们只想编辑一个变量.

$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;

$red: #dc3545;
$yellow: #ffc107;
$green: #006600; // This is the only variable I wanted to change
$cyan: #17a2b8;

$theme-colors: (
  primary: $green,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
);

Answer 2

Angular CLI故事在https://github.com/angular/angular-cli/wiki/stories-include-bootstrap给出了答案,我将在下面进行总结.请注意,我还没有找到它如何与之交互ng-bootstrap.

创建一个项目:

ng new my-app --style=scss
cd my-app

安装Bootstrap 4:

npm install bootstrap@next --save

配置项目

创建一个空文件,您可以_variables.scss在src/其中进行样式修改.

在styles.scss添加以下内容:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置应用程序后,运行ng serve以在开发模式下运行应用程序.在浏览器中导航到应用程序localhost:4200.

验证是否显示bootstrap样式按钮.要确保打开变量_variables.scss并添加以下内容:

$brand-primary: red;

返回浏览器以查看更改的字体颜色.