Настроить переменные начальной загрузки 4, используя свои собственные переменные?

Question

Я использую последнюю версию Bootstrap 4 beta 2. Я пытаюсь настроить его. Имею ввиду переменные переменные со своими.

У меня есть своя styles.scss со всем импортом начальной загрузки:

// My variables
@import 'helpers/variables';

// Bootstrap files
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/root';
@import 'node_modules/bootstrap/scss/print';
@import 'node_modules/bootstrap/scss/reboot';
// ... all others

Официальная документация содержит пример того, как можно настроить загрузчик (тематический). Но есть только простой пример с HEX -цветами.

Но что, если я хочу переопределить переменные в начальной загрузке _variables.scss и использовать переменные из этого файла одновременно? Например, я хочу сделать мой $primary черный. У них уже есть эта переменная внутри _variables.scss, но я не нашел идеи, как его использовать. Я пытался так:

// source: helpers/variables
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';

$primary: $indigo;

Но в этом случае используется синий цвет. Если я удалю этот импорт из helpers/variables и заменить цвет на HEX - все работает отлично.

Я думаю, что нет никакого способа сделать это, потому что SASS не допустит этого, но решил обратиться к сообществу.

Answer 1

Просто создайте свой собственный файл variables.scss и установите его для загрузки первым в вашем style.scss, чтобы он перезаписывал переменные Bootstrap по умолчанию.

Затем просто скопируйте и вставьте некоторые переменные из Bootstrap _variables.scss, которые вы хотите изменить, в свои переменные.scss и настройте их. Обратите внимание, что вы должны удалить метки по умолчанию в вашей переменной.scss.