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

Posted 2023-03-06

【中文标题】如何使用 angular-cli 和 ng-bootstrap 自定义 Bootstrap 4 SCSS 变量？

【英文标题】：How to customise Bootstrap 4 SCSS variables using angular-cli & ng-bootstrap?

【发布时间】：2017-09-09 16:26:09

【问题描述】：

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

我该怎么做？

【参考方案1】：

我花了一些时间来解决这个问题，希望对某人有所帮助，这些是我创建自己的自定义样式以覆盖 ng-bootstrap 的步骤。

使用 scss 作为样式创建一个 Angular 项目（不是 .sass！） 使用ng add 安装ng-bootstrap，详见安装部分（不是npm install）。

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

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

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

至于查找要覆盖的变量，我先是通过boostrap magic的保存找到的，不过可以直接在node_modules\bootstrap\scss\_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';

【参考方案2】：

终于成功了。我想在我的 Angular 7.2.15 应用中实现 bootstrap 4.3.1。

由于现有应用的默认样式模式为 css - 我使用“Angular-cli from css to scss”将其转换为 scss（样式模式）

然后引用互联网上的许多地方以及此页面。 以下步骤对我有用。 （感谢@Etherman 和@Dan）

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

【参考方案3】：

在了解了如何将 scss 包含在 angular 5 项目中（请参阅此链接：Using Sass with the Angular CLI），请按照此 boostrap 教程更完整：https://getbootstrap.com/docs/4.0/getting-started/theming/

【参考方案4】：

接受的答案不再有效。如果你和我一样，你是一个新的 Angular 用户，试图将引导程序添加到你的项目中，并在此处关注 angular-cli wiki：https://github.com/angular/angular-cli/wiki/stories-include-bootstrap（粘贴在接受的答案中）。

这里讨论了这个问题： 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
);

【讨论】：

这是一个使用 scss 变量和 ng-bootrap 的良好实践示例：github.com/ngx-rocket/starter-kit/blob/master/src/main.scss

【参考方案5】：

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

配置项目

在src/ 中创建一个空文件_variables.scss，这是您的样式修改所在。

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

返回浏览器查看字体颜色变化。

【参考方案6】：

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

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

【讨论】：

感谢您的尝试。不幸的是，结果并没有那么简单，但是我找到了一个答案，我将发布。