logo标签列表

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

angularangular-clitwitter-bootstrap-4ng-bootstrap
15
7个回答
16
已被接受的答案不再适用。如果您像我一样是一个新的Angular用户，试图将Bootstrap添加到您的项目中并遵循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
);
1
这是一个使用scss变量和ng-bootstrap的良好实践示例：https://github.com/ngx-rocket/starter-kit/blob/master/src/main.scss - István Békési
10
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

配置项目

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

刷新浏览器以查看字体颜色的更改。

2

我花了一些时间才弄清楚，希望能帮到别人，这是我创建自己的自定义样式以覆盖 ng-bootstrap 所采取的步骤：

  1. 使用 scss 创建一个 Angular 项目来进行样式设计（不要使用 .sass!）
  2. 按照安装部分中详细说明的方法，使用 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';
1

最终成功了。我想将Bootstrap 4.3.1应用于我的Angular 7.2.15应用程序。

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

然后在互联网上和本页面上参考了许多地方。以下步骤对我起作用（感谢@Etherman和@Dan）。

  1. 使用npm安装Bootstrap
  2. 创建一个文件（例如theme.scss）用于主题颜色更改和修改，参考@Etherman的提示
  3. 然后如@Dan所说，在styles.scss文件中从src文件夹导入修改后的文件，然后从node_modules中导入Bootstrap scss文件。
0
Angular CLI 在其 .angular-cli.json 配置文件中提供了一个 styles 配置数组。在这里，您可以放置要编译为项目运行的一部分的 scss 文件路径。
您可以将自定义 bootstrap scss 文件的路径添加到该数组中，它将被编译为应用程序的样式。
谢谢尝试。不幸的是，它并没有像那么简单，但我找到了一个答案，我会发帖分享。 - Dan
0
0

不要修改位于node_modules\bootstrap\scss中的源文件，更好的方法是创建自己的.scss样式表，并使用您想要覆盖的变量。

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

$primary;
$success;

  1. 创建一个Sass文件。在本例中，我们将在src/assets/scss/main.scss创建我们的文件。

  2. 声明您的新变量：

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

  3. 最后，也是最重要的一步，导入您刚刚创建的main.scss类。 确保在导入Bootstrap样式表之前执行此操作。

在导入变量本身之前导入变量覆盖可能看起来有些违反直觉，但这是你在这里需要做的。

如果你查看那个_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 团队的文档。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接