Bootstrap 4 цвета не меняются в Angular 9 - PullRequest
Новая
       37

Bootstrap 4 цвета не меняются в Angular 9

0 голосов
/ 03 февраля 2020

Я создал пользовательский файл s css (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 file- 

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

А вот мой массив css схем, стилей и скриптов моего angular.json файла- 

      "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 is работает нормально, но цвета не перестараются. Есть идеи, что я делаю не так?

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

вы должны удалить "node_modules / bootstrap / dist / css / bootstrap .min. css" из массива styles 

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

, потому что вы уже импортировали bootstrap sass версия в вашей базе. css.

0 голосов
/ 03 февраля 2020

У меня возник вопрос, в чем причина проблемы. Это порядок в массиве стилей angular.json. Мой файл base.scss был указан до bootstrap.min.css, который, как мне кажется, переопределяет мои изменения. Изменение порядка решило проблему. Список должен быть таким - 

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