Перезаписать Bootstrap 4 переменных Sass переменными CSS? - PullRequest
Новая
       6

Перезаписать Bootstrap 4 переменных Sass переменными CSS?

3 голосов
/ 02 марта 2020

Я пытаюсь перезаписать переменную Primary Sass по умолчанию в Bootstrap 4 на собственный цвет, используя переменные CSS в приложении Angular, например:

стилей. s css

:root {
  --primary: #00695c;
}

$myPrimary: var(--primary);

$primary: $myPrimary; // This does not work

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

Я получаю эту ошибку при компиляции моего приложения: 

Failed to compile.

./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                         ^
      $color: var(--primary) is not a color.
    ╷
181 │ $link-hover-color:                        darken($link-color, 15%) !default;
    │                                           ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 181:43  @import
  node_modules\bootstrap\scss\bootstrap.scss 9:9      @import
  stdin 19:9                                          root stylesheet
      in C:\Work\node_modules\bootstrap\scss\_variables.scss (line 181, column 43)

Есть ли способ решить эту проблему и перезаписать bootstrap sass переменные с использованием css переменных?

Есть еще один связанный вопрос , но я не могу решить мою проблему с ним.

Обновление

На самом деле я создал библиотеку компонентов Angular для внутреннего использования. Я реализовал Theming в этой библиотеке, используя CSS переменные, чтобы я мог динамически изменять их значения и позволять пользователю выбирать тему для приложения.

Итак, внутри моей библиотеки у меня есть разные файлы тем, ниже один из них:

theme.s css

@import './library-styles-to-be-used-in-app.scss';

:root {
  --primary: #00695c;
  --secondary: #f4f5f6;
}

Теперь я импортирую этот файл темы в мое приложение angular styles.s css файл выглядит так: 

@import '../dist/library/styles/theme.scss';
@import '../node_modules/bootstrap/scss/bootstrap';

См. Изображения ниже bootstrap css переменные уже перезаписаны, но если я использую bootstrap класс, подобный btn btn-primary, он все еще показывает этот старый синий цвет.

Bootstrap CSS Variables

My Theme CSS Variables

1 Ответ

2 голосов
/ 02 марта 2020

Это невозможно, поскольку CSS пользовательские свойства и переменные SASS - это две разные вещи.

CSS пользовательские свойства могут изменяться во время выполнения с помощью Javascript.
С другой стороны, переменные SASS имеют статус c, они будут сгенерированы и затем будут жестко закодированы в .css - Файл. Например, функциональность darken() из SASS берет входную строку (например, шестнадцатеричное значение) и выводит затемненную версию этого шестнадцатеричного значения.

Но bootstrap уже использует CSS пользовательских свойств, поэтому, возможно, вы просто используете их неправильно. Может быть, если вы расширите то, чего хотите достичь, возможно, мы сможем помочь вам лучше.

На данный момент единственный ответ, который мы можем дать вам: это невозможно.

...