Scss从@import迁移至@use/meta.load-css父选择器&报错解决方案问询

DevOps 小满

2026-9-25

报错原因

@import 的规则是直接将导入文件的内容原地插入到导入位置，所以 _other.scss 里的父选择器 & 可以正确继承上层的 .d 选择器上下文。而 @use 和 meta.load-css 会将导入的文件作为独立模块处理，模块顶层默认没有父选择器上下文，直接写 & 就会触发语法报错。

最优迁移方案

推荐优先使用 mixin封装 的方案，对原有代码改动最小，输出的CSS效果和之前用@import完全一致：

步骤1：修改`_other.scss`，把原有样式封装为mixin

@mixin other-styles {
  &.d2 {
    // 保留原有样式逻辑
  }
}

步骤2：修改`main.scss`，导入模块后调用mixin

// 导入依赖模块
@use "_other" as *;

.a {
  .b {
    .c {
      .d {
        // 在当前选择器上下文下调用mixin，&会自动继承.d的上下文
        @include other-styles;
      }  
    }
  }
}

可选的`meta.load-css`适配方案

如果你坚持要使用meta.load-css规则，可以调整_other.scss的选择器写法，去掉顶层的&：

调整后`_other.scss`代码

.d2 {
  // 原有样式
}

调整后`main.scss`代码

@use "sass:meta";

.a {
  .b {
    .c {
      .d {
        // 用父选择器拼接加载的样式，效果等价于.d.d2
        & {
          @include meta.load-css("_other");
        }
      }  
    }
  }
}