Переопределения переменных не полностью перекрывают

Question

Я настроил свой проект с помощью установки npm, чтобы использовать преимущества sass. Кажется, все работает, но когда я настраиваю $theme-colors, он работает только на части страницы?

Я пытался:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

и

$primary: #FF9671
$theme-colors: ("primary": #FF9671)
$link: $primary

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

Также в качестве примечания Bootstrap говорит, что мне нужно только импортировать:

@import "../bootstrap/scss/functions"
@import "../bootstrap/scss/variables"
@import "../bootstrap/scss/mixins"

Тем не менее, это ничего не значит, поэтому мне приходится импортировать весь файл bootstrap.scss, чтобы увидеть результаты. Что кажется полным перебором?

Заранее спасибо

Answer 1

После долгих разговоров и царапин на голове я, наконец, заметил, что загружаю файлы в неправильном порядке.

Структура файла

css/  
|– bootstrap/  
|– custom/  
   _all.sass  
   _variables.sass  
|– main.sass

Оригинальный main.sass

@charset "utf-8"

@import "bootstrap/scss/bootstrap"
@import "custom/all"

Обычай был внизу, когда он должен быть над ним. Как таковой:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

Я думал, что порядок имел значение только в моем файле variables, который выглядел так:

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

Это также заставило меня понять, что мне не нужно @import загружать в моем файле variables. Как я импортирую в мой main.sass. Который сейчас выглядит так:

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

и, следовательно, мой файл переменных просто так:

variables.sass

$primary: #845EC2

Answer 2

Рассмотрим способ установки некоторых переменных Bootstrap в variables.scss ...

$link-color: theme-color("primary") !default;
$component-active-bg: theme-color("primary") !default;

Это отличается от того, как другие theme-color() зависимые переменные (bg-, alert-, text)- и т. д.) устанавливаются (путем итерации карты цветов темы).Поэтому вместо того, чтобы импортировать сначала «функции» и «переменные», просто переопределите цвет темы $primary следующим образом ...

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

@import "bootstrap";

Демонстрация 1: https://www.codeply.com/go/gX4Ye5iZgp

Или, , вы можете просто переопределить $ primary следующим образом ...

$primary: #FF9671;
@import "bootstrap";

Демонстрация 2: https://www.codeply.com/go/5tdlvOVTv3

---

Невозможно переопределить $ theme-color в начальной загрузке 4