在 SCSS 中使用 !default 值和 @use

Question

我在使用 @use 时在 SCSS 中覆盖 !default 值时遇到一些困难。当我使用 @import 而不是 @use 时，它的行为是正确的，但是当使用 @use 时，控制台给出了一个错误（这个模块和新模块都定义了一个名为“$变量名).

当我在同一个文件中更改变量时，我将变量分配给一个元素，它的行为正确:

// 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

此外，当我在 main.scss 文件中仅 @forward variable.scss 和 @use change.scss 时，它不会给出正确的结果（ 正文背景颜色保持红色没有错误)。

有人有什么建议吗？感谢所有帮助。

约普

Answer 1

错误是你在index.scss中使用了两个@forward并且这两个文件有同名的变量。用@import加载change.scss文件就可以解决问题。

有关 @import、@use 和 @forward 之间差异的更多信息，请参见此处：https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/。

// variables/index.scss
@forward "./variable.scss";
@import "./change.scss";

在 SCSS 中使用 !default 值和 @use

Use !default value with @use in SCSS

sass