SassError: @use 规则必须写在任何其他规则之前。有角的

【问题标题】：SassError: @use rules must be written before any other rules. AngularSassError: @use 规则必须写在任何其他规则之前。有角的
【发布时间】：2023-01-05 22:04:15
【问题描述】：

错误内容：

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。

标签： css angular typescript sass

【解决方案1】：

您必须将任何 @use 代码行放在其他代码之上。

例如下面的代码抛出错误：

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

@use "src/corners";

但是这段代码可以正常工作：

@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

请记住，即使您不使用文件中的任何内容，中间行中的 @use 也会引发错误。

【讨论】：

【解决方案2】：

看起来您正在尝试使用 @use 指令导入 Sass 模块，但它出现在 Sass 文件中的其他一些样式之后。 @use 指令必须是 Sass 文件中的第一件事，在任何其他样式或指令之前。

要修复此错误，您需要将 @use 指令移动到 Sass 文件的顶部，在任何其他样式或指令之前。例如：

@use 'sass:map';

// Other styles and directives go here

【讨论】：