在 SCSS 中使用 !default 值和 @use

Question

在使用

!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

时，它不会给出正确的结果（主体背景颜色保持红色，没有错误）。

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

乔普

Answer 1

!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

  之前。

Answer 2

错误在于您在

@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";