在最终文件上更改SCSS变量值

Question

我有两个文件：_partial.scss由file.scss导入。

我在_partial.scss上有一些变量，我想更改file.scss中变量的值，但更改并未显示。

我们说$var: #000000;中有_partial.scss。如果我尝试在$var: #AAAAAA;上执行file.scss，则变量的值不会更改。

我做错了什么？

代码：

_partial.scss：

 $var: #FFFFFF;

 body {
   color: $var;
 }

file.scss：

 $var: #000000;
 @import 'partial';

输出是：

 body {
   color: #FFFFFF;
 }

我希望它是

 body {
   color: #000000;
 }

Answer 1

如果不修改_partial.scss文件，就没有办法解决这个问题。

如果您想要默认变量，可以在@import上覆盖，则需要将其与 !default 一起使用：

<强> _partial.scss：

 $var: #FFFFFF !default;

 body {
   color: $var;
 }

<强> file.scss：

 $var: #000000;
 @import 'partial';

输出CSS：

 body {
   color: black;
 }

否则，最后指定的值将覆盖之前的值。

另一种选择是在_variables.scss之外的单独文件（例如_partial.scss）中定义所有变量...然后您可以覆盖/修改它们（例如直接在导入file.scss之前_partial.scss如果您愿意）。