重写create react应用程序内的SASS变量

因此，我正在使用create react应用程序，并正在导入一个自定义组件：

component.js：

import './component.scss'

component.scss：

$primary-color: black;

demo.js：

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

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

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

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

---

但是我得到了相同的结果

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
的值，则仅默认为黑色。”

更多关于flag的信息。
我明天会尝试，如果有效，我会接受你的答案，非常感谢：）
import './demo.scss'
import Component from './Components/component.js'

$primary-color: black !default;