Bootstrap 4 种颜色在 Angular 9 中没有变化

Question

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

$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 工作正常，但颜色没有被覆盖。知道我做错了什么吗？

Answer 1

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

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

Answer 2

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

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

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

Bootstrap 4 种颜色在 Angular 9 中没有变化

Bootstrap 4 colors are not changing in Angular 9

sass

twitter-bootstrap

bootstrap-4

angular

angular9