如何避免Sass主题编译产生重复CSS

主题CSS重复是因多入口@import或构建层多注入，非Sass错误；应改用@use去重、统一入口加载、禁用@extend、用@mixin封装共用样式，并通过@forward精准暴露变量。

为什么主题编译后CSS里同一规则出现多次

不是Sass编译器出错，而是主题文件被多个入口重复@import，或构建层把同一份SCSS注入了多处<style>标签。比如_theme.scss被light.scss和dark.scss同时@import，又各自被不同JS模块import，最终浏览器里看到两个.theme-light { color: #fff; }。

用@use替代@import强制单次加载

@use天然去重：同一路径无论被多少文件@use，Sass内部只执行一次解析。但必须改写旧写法：

1. 删掉所有@import "theme"，换成@use "theme" as theme
2. 访问变量必须加前缀：color: theme.$primary;，直接写$primary会报Undefined variable
3. 第三方主题包（如bootstrap/scss/_variables.scss）若未适配@use，先@use "sass:math"再@import "bootstrap/scss/functions"，顺序不能颠倒

Webpack中防止多<style>标签注入

即使Sass层干净了，构建工具仍可能把主题样式塞进多个<style>块：

1. 确认style-loader配置为injectType: 'singleton'，不是默认的'styleTag'
2. 禁止在React组件里分散import './light-theme.scss'，统一收口到项目主入口index.scss中@use 'themes/light'
3. 检查mini-css-extract-plugin是否启用了chunkFilename: '[name].[contenthash:8].css'，否则HMR重建会导致旧样式残留

主题切换时别靠@extend复用基础类

用@extend合并主题类（如.theme-dark @extend .base-styles）会导致选择器爆炸，且无法按需加载：

1. 改用@mixin封装共用视觉契约：@mixin base-typography { font-family: $font-stack; line-height: 1.5; }
2. 主题文件只定义差异部分：light.scss里写.theme-light { color: $light-text; @include base-typography; }
3. 禁用跨主题@extend——dark.scss不能@extendlight.scss里的占位符，否则形成隐式依赖链

真正容易被忽略的是@use和@forward的组合：主题包内部要用@forward "vars" show $primary, $spacing精准暴露变量，而不是让下游直接@use "theme/vars"——后者会破坏主题封装边界，导致轻量主题也加载全套颜色系统。