Это просто Sass Map: map-get ($ theme-colors, primary)

утстрап 4.0 сSASS

мойstyle.scss Файл содержит следующий код:

@import "../bootstrap/scss/bootstrap";

@import "colors";
@import "main";

а также_colors.scss Файл содержит следующий код:

$bg-white : white;

$theme-colors: (
        primary: #333333
)

Вы можете видеть, что я просто пытаюсь переопределить$theme-color('primary') но проблема в том, что он ничего не делает.

И если я перейду@import "colors" в начале файлаstyle.scss Это дает мне следующую ошибку:

ошибка ../bootstrap/scss/_forms.scss (строка 284: $ color: null не является цветом для `rgba ')

На самом деле,style.scss файл компилируется вstyle.css файл и тот, который является связанным файлом.

Вопрос: Как я могу переопределить$theme-color вbootstrap-4 когда используешьSASS?

Любая помощь будет оценена, и спасибо заранее

Приветствия.

 Yevgeniy Afanasyev15 мая 2018 г., 02:28
Хороший вопрос, эту же проблему можно назвать так:Argument $color of darken($color, $amount) must be a color

Ответы на вопрос(3)

Решение Вопроса

Обновление 2018 для Bootstrap 4.1

Чтобы изменитьпервичныйили любой изцвета темы в Bootstrap 4 SASS установите соответствующие переменныедо импортаbootstrap.scss, Это позволяет вашему пользовательскому scss переопределить значение по умолчанию, а затем будет установлено во всехtheme-colors циклы (btn-primary, bg-primary, text-primary и т. д.) ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: #333333;
);

/* finally, import Bootstrap */
@import "bootstrap";

Демо-версия:https://www.codeply.com/go/lobGxGgfZE

Также смотрите этот ответ

 Michael Czechowski17 окт. 2018 г., 13:17
@HDP Вместо импорта функций и переменных сделайте это@import "~bootstrap/scss/bootstrap-reboot";
 HDP23 июл. 2018 г., 07:46
Я попробовал это с последней версией v4.1.2. но я получаю ошибку этоError: File to import not found or unreadable: utilities/screenreaders. как я могу решить? Благодарю.
 Zim17 окт. 2018 г., 15:27
@MichaelCzechowski - это тоже работает, но также добавляет миксины, которые не нужны для настройки цветов темы.
 wuliwong13 нояб. 2018 г., 21:21
Я считаю, что вам нужно удалить точку с запятой после # 333333. Выдает ошибку для меня.
 Michael Czechowski20 окт. 2018 г., 20:20
Немного обидно, что начальная загрузка не предоставляет простого руководства для реализации настроек. @ Зим ты прав. Теперь я изменил свой метод.

Bootstrap 4 beta с помощьюnpm и вы хотите настроить Bootstrap SCSS без изменения источника вnode_modules.

Я делаю это путем переопределения переменных Bootstrap, содержащихся вvariables.scss:

приложение-styles.scss

// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';

// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';

variables.scss

$theme-colors: (
    primary: $trump-hair,
    secondary: $gandalf-hat,
    success: $my-favorite-color,
    info: #FBC02D,
    warning: #FF5722,
    danger: $color-of-melena,
    light: #1B5E20,
    dark: $bile-green
);

Способ переопределить цвета темы начальной загрузки на самом деле должен быть изменен в следующей бета-версии 2. Главное требование состоит в том, что вы должны включить всеtheme-colors Sass карта при переопределении. В текущей бета-версии отказ от включения всей карты Sass приведет к:

аргументация$color изdarken($color, $amount) должен быть цвета

Пожалуйста, смотрите этот Githubвопрос и этоCodepen для получения дополнительной информации и примера того, как вы сможете переопределить цвета темы в бета-версии 2.

 Blake Mumford20 сент. 2017 г., 23:22
Это просто Sass Map: map-get ($ theme-colors, primary)
 Notflip20 сент. 2017 г., 16:25
Как правильно получить эти значения? Я вижу theme-colors ('blue') в файлах scss начальной загрузки, но я получаю ошибки ..

йл scss перед переменными.

@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

Ваши пути могут отличаться.

Это с Bootstrap 4 Beta 1.

 micah28 сент. 2017 г., 20:22
Это ответ, который я узнал и для себя. Без функций над переменными он не компилируетсяtheme-color("primary") правильно, потому что есть функция под названиемtheme-color внутри функций.
 M. Ryan16 нояб. 2017 г., 18:26
Подтвержденный, кажется, не работает в данный момент. На самом деле, когда я пытаюсь это все равно выдает ошибку.

Ваш ответ на вопрос