如何在Dart Sass的选择器内部实现外部文件导入

问题原因 #

Dart Sass 中的@use规则设计上强制要求必须写在文件最顶层，不允许嵌套在选择器、@media 等任何规则块内部，这是和旧版@import的核心差异之一。@use的设计初衷是为了消除旧@import的全局污染、重复加载等问题，因此要求所有依赖必须在文件头部明确声明，无法直接替代嵌套场景下的@import。

实现需求的两种方案 #

方案1：如果可以修改外部文件（推荐） #

把外部文件的所有样式封装成一个混合宏（mixin），再在需要的位置引入调用即可：

1. 修改external-file.scss的内容，把原有样式全部包裹进mixin：

// external-file.scss
@mixin all-styles {
  // 原有文件的所有样式写在这里
  .btn {
    padding: 8px 12px;
  }
  /* 其他原有样式 */
}

2. 主文件中先在顶层引入外部文件，再在选择器内调用mixin：

// 主文件顶部先声明@use
@use 'external-file' as *;

.selector {
  // 嵌套位置调用mixin，即可把所有样式嵌套到当前选择器下
  @include all-styles;
}

方案2：如果无法修改外部文件（比如第三方依赖） #

使用 Dart Sass 内置的sass:meta模块提供的load-css混合宏，这是官方指定的替代嵌套@import的方案，效果和你之前用@import完全一致：

// 主文件顶部先引入内置模块
@use 'sass:meta';

.selector {
  // 直接加载外部文件的所有样式到当前作用域
  @include meta.load-css('external-file');
}

注意：meta.load-css需要 Dart Sass 版本 >= 1.23.0 才支持，版本过低请先升级 Dart Sass。

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