SASS @use 异常：变量可导入但混合器无法生效？

问题原因 #

1. @use通配符导出的兼容问题：你使用@use "../variables.scss" as *的通配符导入方式，在Sass 1.70.0版本中可能存在混合器未被正确暴露到当前作用域的情况，尽管变量能正常导入，但混合器的导出逻辑出现异常。
2. CSS导入干扰模块导出：variables.scss中开头的CSS字体@import url(...)可能干扰了Sass模块对后续混合器的识别与导出，导致混合器未被纳入模块导出列表。

解决方法 #

方法1：使用命名空间调用混合器 #

放弃通配符导入，通过命名空间明确访问混合器，避免作用域导出异常：

@use "../variables.scss" as vars;

.homepage {
  &--carousel {
    &-slide {
      @include vars.flex-row; // 通过命名空间调用混合器
    }
    &-arrow {
      width: 1rem;
      height: 1rem;
      background: vars.$dark_red; // 变量也可通过命名空间访问，避免冲突
    }
  }
}

方法2：拆分文件，分离CSS与Sass逻辑 #

将字体导入的CSS代码与变量、混合器的Sass代码拆分，避免CSS导入干扰模块导出：

1. 创建fonts.scss专门存放字体导入：

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500;700&display=swap");

2. 修改variables.scss，移除字体导入：

// 配色方案
$dark_red: #79040a;
$black: #111114;
$yellow: #fdce6e;

// 字体变量
$lato: "Lato", sans-serif;
$josefin_sans: "Josefin Sans", sans-serif;

@mixin flex-row {
  display: flex;
  flex-direction: row;
}

3. 在carousel.scss中分别导入两个文件：

@use "../fonts.scss";
@use "../variables.scss" as *;

.homepage {
  &--carousel {
    &-slide {
      @include flex-row;
    }
    &-arrow {
      width: 1rem;
      height: 1rem;
      background: $dark_red;
    }
  }
}

方法3：清理Sass缓存 #

缓存残留可能导致旧编译结果干扰，执行命令清理Dart Sass的缓存目录：

rm -rf .sass-cache

清理后重新编译项目，验证混合器是否能正常识别。

方法4：升级Sass版本 #

尝试将Sass升级到最新稳定版，排查是否为1.70.0版本的特定bug导致的问题。

内容的提问来源于stack exchange，提问作者zephyr_grey