Переопределение переменных SASS внутри приложения create-реагировать

Question

Поэтому я использую приложение create-реакции-приложение и импортирую пользовательский компонент:

component.js:

import './component.scss'

component.scss:

$primary-color: black;

demo.js:

import Component from './Components/component.js'
import './demo.scss'
...
render() => {
  return <Component />
}

и в demo.scss:

$primary-color: red;

Я ожидаю, что компонент будет визуализирован с использованием $ primary-color как красного, но этоостается черным.

Я также пытался импортировать demo.scss перед импортом компонента, поэтому в demo.js:

import './demo.scss'
import Component from './Components/component.js'

но я получаю тот же результат

Answer 1

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

Итак, в первом примерепри demo.scss, импортированном после component.scss, css для component.scss сначала скомпилируется, используя значение, которое он имел в то время для $primary-color.Как только он достигает значения demo.scss, значение изменяется, но CSS для компонента уже был скомпилирован со старым значением.

Следовательно, второй порядок корректен для переопределения значений переменных по умолчанию.

import './demo.scss'
import Component from './Components/component.js'

Однако возникает проблема, что строка в component.scss, где $primary-color: black; заменит красный цвет.Таким образом, здесь мы можем использовать флаг !default, что означает «Только по умолчанию для черного цвета, если ранее не было определено предыдущее значение для $primary-color».

$primary-color: black !default;

Подробнее о !default флаг.