在使用
!default
时,我在覆盖 SCSS 中的 @use
值时遇到一些困难。当我使用 @import
而不是 @use
时,它的行为正确,但在使用 @use
时,控制台会给出错误(此模块和新模块都定义了一个名为“$variable-name”的变量)。
当我在同一文件中更改变量时,我将变量分配给一个元素,它的行为正确:
// variables/variable.scss
$color-accent: red !default;
// variables/index.scss
@forward ./variable.scss;
// change.scss
@use './variables/index' as *;
$color-accent: blue;
body {
background-color: $color-accent;
}
// body background color is blue
但是当我尝试在单独的文件中覆盖它时,它不会工作:
// change.scss
$color-accent: blue;
// variables/index.scss
@forward ./variable.scss;
@forward ./change.scss;
// base.scss
@use './variables/index' as *;
body {
background-color: $color-accent;
}
// main.scss
@use './base';
// error: Two forwarded modules both define a variable named $color-accent
此外,当我仅
@forward
文件中的 variable.scss
@use
和 change.scss
main.scss
时,它不会给出正确的结果(主体背景颜色保持红色,没有错误)。
有人有建议吗?感谢所有帮助。
乔普
!default
在新模块系统中的工作方式是必须使用with
子句覆盖这些变量。 示例:
index.scss
@use './base' with (
$color-accent: green
);
base.scss
$color-accent: red !default;
body {
background-color: $color-accent;
}
一些注意事项:
可重写的变量必须继续使用
!default
,否则无法通过这种方式重写。
使用
@use './base';
的子句之后可以有任意数量的 with
,但其他子句不能使用 with
子句,只有第一个子句才允许这样做。 后面的 @use
也会自动尊重变量覆盖。
要使用和转发文件,实际上两者都必须显式完成:
@use './base' with (
$color-accent: green
);
@forward './base';
使用
with
时,@use
必须位于 @forward
之前。
错误在于您在
@forward
中使用了两个index.scss
,并且这两个文件具有相同名称的变量。只需使用 change.scss
加载 @import
文件即可解决问题。
有关
@import
、@use
和 @forward
之间区别的更多信息,请参见:https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/。
// variables/index.scss
@forward "./variable.scss";
@import "./change.scss";