覆盖创建-反应-应用程序中的 SASS 变量

Question

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

组件.js：

import './component.scss'

组件.scss：

$primary-color: black;

演示.js：

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

在demo.scss中：

$primary-color: red;

我希望该组件将使用$primary色渲染为红色，但它保持为黑色。

在导入组件之前，我还尝试导入demo.scss。因此，在演示中.js：

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

但我得到了相同的结果

Answer 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的先前值，则仅默认为 black"。

$primary-color: black !default;

有关!default标志的更多信息。