如何使用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

接受的答案不再有效。如果你像我一样，你是一个新的角度用户，试图将引导程序添加到你的项目中，并遵循这里的angular-cli wiki：https://github.com/angular/angular-cli/wiki/stories-include-bootstrap(粘贴在接受的答案中)。

这里讨论了这个问题： https://github.com/twbs/bootstrap/issues/23112

简短版本：主题颜色现在位于嵌套对象中，因此$brand-primary之类的内容不再适用 - 我们现在必须更改$theme颜色。它可以工作，但是即使我们只想编辑一个变量，我们现在也必须替换整个对象。

$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

安装引导程序 4：

npm install bootstrap@next --save

配置项目

创建一个空文件_variables.scsssrc/这是您的样式修改将要去的地方。

在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。

验证是否显示引导样式按钮。要确保您的变量被使用，请打开_variables.scss并添加以下内容：

$brand-primary: red;

返回浏览器以查看字体颜色已更改。

Answer 3

我花了一段时间才弄清楚，所以，希望它对某人有所帮助，这些是我创建自己的自定义样式的步骤，该样式覆盖了ng-bootstrap。

1. 使用样式的scss创建一个 Angular 项目(不是 .sass！
2. 按照安装部分(不是npm install)中详细介绍的ng add安装 ng-bootstrap
。

这在我的styles.scss文件中添加了一行，如下所示：

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

3. 从这里开始，我可以在@import上方添加属性，这意味着我可以根据需要更改主题。

至于找到要覆盖的变量，我首先使用从 boostrap 魔法中保存它们，但它们可以直接在node_modulesbootstrapscss_variables.scss

中找到使用覆盖原色的工作styles.scss示例：

/* You can add global styles to this file, and also import other style files */
$primaryColor: hotpink;       
$theme-colors: (primary: $primaryColor);
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

Answer 4

终于成功了。我想在我的角度 7.2.15 应用程序中实现引导 4.3.1。

由于现有应用程序的默认样式模式为 css - 我使用"从 css 到 scss的 Angular-cli"将其转换为 scss(样式模式)

然后引用互联网上的许多地方和这个页面。 以下步骤对我有用。(感谢@Etherman和@Dan)

1. 使用 npm 安装引导程序
2. 为主题颜色更改和修改创建一个文件(例如 theme.scss)，请参阅@Etherman提示
3. 然后，正如@Dan所说，从src文件夹中导入修改后的文件，然后从styles.scss文件中node_modules导入bootstrap scss文件。

Answer 5

Angular CLI 在其.angular-cli.json配置文件中提供了一个styles配置数组。在这里，您可以放置要编译的 scss 文件的路径，作为运行项目的一部分。

您可以将路径添加到写入该数组的自定义引导 scss 文件，该文件将被编译为应用程序的样式。

Answer 6

在了解了如何将 scss 包含在 angular 5 projet 中之后(请参阅此链接：将 Sass 与 Angular CLI 一起使用)，请按照以下 boostrap 教程更完整： https://getbootstrap.com/docs/4.0/getting-started/theming/

Answer 7

与其修改位于node_modulesbootstrapscss中的源文件，更好的方法是使用您可能想要覆盖的变量创建自己的.scss样式表。

例如，如果要从 Bootstrap 的默认配置中覆盖这两个变量：

$primary;
$success;

1. 创建一个 sass 文件。出于此示例的目的，我们将在src/assets/scss/main.scss创建我们的

2. 声明新变量

   $primary: #5f5ca3;
   $success: #4ebc94;
   

3. 最后，也是最关键的，导入您刚刚创建的 main.scss 类。请确保在导入引导程序样式表之前执行此操作。

在导入变量本身之前导入变量覆盖似乎违反直觉，但这就是您需要在此处执行的操作。

如果你看一下那个 _variables.scss 文件(node_modules/bootstrap/scss/_variables.scss)，你会看到很多变量定义后面都跟着!default。

这就是 SCSS 的说法："如果尚未定义此变量，请在此处定义它。

但是您自己已经定义了这两个变量。所以它们不会被重新定义。

因此，您的src/styles.scss应如下所示：

/* importing KOR theme */
@import './assets/scss/main;
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';
// other style declarations and global configurations

我希望这有帮助！以下是 Bootstrap 团队的文档。