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

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

1 голос
/ 28 мая 2019

Поэтому я использую приложение 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'

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

1 Ответ

1 голос
/ 01 июня 2019

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 флаг.

...