Применение пользовательских переменных Bootstrap в проекте Angular

Question

Я пытаюсь переопределить цвета Bootstrap по умолчанию в моем проекте Angular.Я создал файл _variables.scss внутри моей папки src.

Внутри этого файла я добавил следующий код: $primary: purple;

Затем я импортировал мой _variables.scss файл в свой основной styles.scss, например: @import 'variables';

Я также упорядочил свой файл angular.json так, чтобы мои стили выглядели так:

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

Чего я хотел бы добиться, так это того, чтобы при использовании следующего HTML-кода в моем html:

<button type="submit" class="btn btn-primary auth-button">Sign in</button>

цвет моей кнопки должен быть фиолетовым.

Я хочу изменить несколько переменных позже и на нескольких страницах, поэтому это должна быть глобальная переменная.

Answer 1

Мне удалось решить эту проблему, удалив Bootstrap, из которого я добавляю его в мои стили в angular.json, и импортировав его вручную в мой styles.scss.

Я также изменил свой путь начальной загрузки, чтобы настроить таргетинг на файл scss.Вот мой HTML-код:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

, а вот мои стили в angular.json:

"styles": [
              "src/styles.scss"
            ],

Answer 2

Вы пытаетесь использовать функции bootstrap-sass, но используете минимизированный css.

Вам также потребуется:

1. использовать bootstrap-sass

   @import './_variables.scss';
   @import '~bootstrap-sass/assets/stylesheets/_bootstrap';
   

2. скомпилируйте свою собственную версию начальной загрузки с вашей темой и используйте эту уменьшенную версию.
3. Если вы используете bootstrap 4 , вывместо этого можно использовать переменные CSS

Answer 3

вы можете изменить его с помощью класса btn-primary начальной загрузки в вашем styles.scss при импорте переменных вверху, используя import из _variables.scss

.btn-primary {
   color: $primary;
}