Sass编译后出现重复CSS是引入机制问题而非bug，主因是@import被多文件调用导致规则重复拼入，或构建层多次注入<style>标签；根治方式是全面替换为@use实现命名空间隔离与单次加载，并统一入口、禁用跨模块@extend、配置style-loader为singleton模式。
直接删掉重复的 @import 或改用 @use，比事后清理编译结果更有效——Sass 本身不生成“重复样式”，而是你引入方式不当导致 CSS 规则被多次注入。
为什么 Sass 编译后会出现重复 CSS
这不是 Sass 的 bug，而是项目结构或引入机制的问题。常见诱因包括：
-
@import被多个文件调用（比如_variables.scss在 A.scss 和 B.scss 里都被@import），导致变量、mixin、样式块被重复拼入输出 CSS - Webpack 中多个 JS 模块各自
import './index.scss'，而style-loader默认每次 import 都插入一个新<style>标签 - 误用
@extend多次合并同一基础类（如.btn被 10 个组件@extend），编译后生成冗长的选择器列表
如何定位重复样式的源头
别急着删 CSS，先确认是 Sass 层还是构建层问题：
- 打开编译后的 CSS 文件（非浏览器 DevTools 中的内联样式），搜索某条规则（如
.btn-primary { background: #007bff; }）出现几次——若只出现一次，说明重复来自运行时多<style>注入 - 若在源 CSS 文件里就重复出现，用 VSCode 全局搜索该选择器在哪些
.scss文件中被定义或@include/@extend - 检查 Webpack 构建日志：是否有多个
[mini-css-extract-plugin] Generating CSS输出同一路径
从 Sass 引入机制根除重复
关键不是“怎么删”，而是“怎么不生成”。优先级从高到低：
立即学习“前端免费学习笔记（深入）”；
- 废掉所有
@import，全部换成@use—— 它天然避免重复加载，且强制命名空间隔离：@use 'base/button' as btn，再用btn.button调用，不会污染全局 - 禁用跨模块
@extend：只允许同文件内或紧邻依赖中@extend .visually-hidden这类纯功能类；禁止A/_card.scss中@extend B/_layout.scss - 把通用
@mixin和变量收口到单一入口文件（如core.scss），其他文件只@use 'core'，不再各自@import 'variables'
构建层防止多份 CSS 注入
即使 Sass 层干净了，Webpack 仍可能把同一份 SCSS 注入多次：
- 确认
style-loader配置启用了injectType: 'singleton'，确保所有 CSS 合并进同一个<style>标签 - 避免在多个 React 组件里分别
import './Button.scss'；改为统一在入口index.scss中@use 'components/Button' - 启用
mini-css-extract-plugin的chunkFilename稳定哈希，防止 HMR 导致样式标签反复重建
真正难处理的不是重复样式本身，而是它背后混杂的 Sass 引入逻辑 + 构建配置 + 组件粒度设计——单点修改容易反弹，必须同步约束 @use 使用规范、组件样式收口策略和 Webpack 注入模式。
