如何在Webpack中避免使用@use的Sass模块重复导入导致CSS选择器重复

嘿，这个问题我太熟了！本质上是你的LinearLayout.scss同时承担了复用mixin容器和组件样式输出两个角色，才导致重复的。当其他模块用@use导入它时，不仅拿到了mixin，还把里面直接输出的linear-layout选择器也一并带进来了，再加上每个模块单独打包，重复自然就出现了。

下面给你几个实用的解决办法，按推荐程度排序：

1. 拆分基础mixin和组件样式（最推荐） #

把复用的逻辑和直接输出的样式彻底分开，用Sass的局部模块（文件名开头加下划线）来避免不必要的编译：

• 新建_linear-layout-mixins.scss（下划线开头的模块不会被单独编译），只放你的mixin：

@mixin LinearLayout { 
  // 这里写你的布局逻辑
}

• 原LinearLayout.scss改成导入这个局部模块，然后专门输出组件样式：

@use "./linear-layout-mixins" as *;
linear-layout { 
  @include LinearLayout; 
}

• 其他模块（比如ScrollView）只导入那个局部的mixin模块，不要碰原LinearLayout.scss：

@use "./linear-layout-mixins" as *;
@mixin ScrollView { 
  @include LinearLayout; 
  // 这里加ScrollView的专属样式
}
scroll-view { 
  @include ScrollView; 
}

这样一来，只有LinearLayout.scss会输出linear-layout的样式，其他模块只会复用mixin的逻辑，不会重复输出选择器。

2. 用条件编译控制组件样式输出 #

如果不想拆分文件，可以给组件样式加个开关，只有当模块被直接编译时才输出：

• 在LinearLayout.scss里添加条件判断：

@mixin LinearLayout { ... }

// 只有当这个模块不是被其他模块导入时，才输出组件样式
@if not variable-exists(_is_imported) {
  linear-layout { @include LinearLayout; }
}

• 其他模块导入时，传递变量标记是导入状态：

@use "LinearLayout" as * with (_is_imported: true);
@mixin ScrollView { @include LinearLayout; ... }
scroll-view { @include ScrollView; }

这个方法不用改文件结构，但需要额外维护变量，适合小项目临时用。

3. 用构建工具事后去重 #

如果不想动Sass代码，也可以在打包环节用工具自动去重：

• 比如用PostCSS的postcss-discard-duplicates插件，它会自动扫描打包后的CSS，把完全重复的选择器和样式规则删掉。你只需要在你的构建配置（比如webpack、vite的配置）里加上这个PostCSS插件就行，源码完全不用改。

个人最推荐第一种拆分模块的方式，它从根源上解决了问题，代码结构也更清晰，后期维护起来省心很多。

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