Bootstrap 4颜色在Angular 9中没有改变答案

【问题标题】：Bootstrap 4 colors are not changing in Angular 9Bootstrap 4颜色在Angular 9中没有改变
【发布时间】：2020-05-19 03:55:13
【问题描述】：

我制作了一个自定义 scss 文件 (modified-bootstrap.scss) 来覆盖引导变量

$theme-colors: (
  "primary": #84329b,
  "secondary": #02bceb
);
@import "node_modules/bootstrap/scss/bootstrap.scss"; // tried relative path too

然后将其导入到名为base.scss 的文件中，该文件添加到angular.json 中。这是base.scss 文件-

@import "./helpers";
@import "./custom";
@import "./modified-bootstrap";

还有，这是我的angular.json 文件的 scss 示意图、样式和脚本数组-

      "styles": [
          "src/styles.scss",
          "src/assets/theme/base.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
        ...
        ...
        "schematics": {
        "@schematics/angular:component": {
        "styleext": "scss"
       }
     }

Bootstrap 工作正常，但颜色没有被覆盖。知道我在做什么错吗？

【问题讨论】：

标签： angular twitter-bootstrap sass bootstrap-4 angular9

【解决方案1】：

您应该从样式数组中删除“node_modules/bootstrap/dist/css/bootstrap.min.css”

      "styles": [
          "src/styles.scss",
          "src/assets/theme/base.scss"
        ],

因为您已经在 base.scss 中导入了 bootstrap sass'version。

【讨论】：

【解决方案2】：

我得到了导致问题的原因的问题。这是angular.json 样式数组中的顺序。我的base.scss 文件列在bootstrap.min.css 之前，我认为这会覆盖我的更改。改变顺序解决了这个问题。列表应该是这样的 -

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
    "src/assets/theme/base.scss",
],

【讨论】：