在 create-react-app 中覆盖 SASS 变量答案

【问题标题】：Overriding SASS variables inside create-react-app在 create-react-app 中覆盖 SASS 变量
【发布时间】：2019-10-14 06:10:14
【问题描述】：

所以我正在使用 create-react-app，并且正在导入自定义组件：

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】：

SASS 使用自上而下的编译，因此它会自上而下地读取，并将使用它在到达 scss 文件中的这些行时拥有的任何变量值来编译 css。

所以在第一个示例中，demo.scss 在component.scss 之后导入，component.scss 的 css 将首先使用它当时为 $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 标志的更多信息。

【讨论】：