0

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

4

2 回答 2

3

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

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

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

于 2020-02-03T19:35:14.553 回答
0

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

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
    "src/assets/theme/base.scss",
],
于 2020-02-03T12:03:45.693 回答