主题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内部只执行一次解析。但必须改写旧写法：
- 删掉所有
@import "theme"，换成@use "theme" as theme - 访问变量必须加前缀：
color: theme.$primary;，直接写$primary会报Undefined variable - 第三方主题包（如
bootstrap/scss/_variables.scss）若未适配@use，先@use "sass:math"再@import "bootstrap/scss/functions"，顺序不能颠倒
Webpack中防止多<style>标签注入
即使Sass层干净了，构建工具仍可能把主题样式塞进多个<style>块：
- 确认
style-loader配置为injectType: 'singleton'，不是默认的'styleTag' - 禁止在React组件里分散
import './light-theme.scss'，统一收口到项目主入口index.scss中@use 'themes/light' - 检查
mini-css-extract-plugin是否启用了chunkFilename: '[name].[contenthash:8].css'，否则HMR重建会导致旧样式残留
主题切换时别靠@extend复用基础类
用@extend合并主题类（如.theme-dark @extend .base-styles）会导致选择器爆炸，且无法按需加载：
立即学习“前端免费学习笔记（深入）”；
- 改用
@mixin封装共用视觉契约：@mixin base-typography { font-family: $font-stack; line-height: 1.5; } - 主题文件只定义差异部分：
light.scss里写.theme-light { color: $light-text; @include base-typography; } - 禁用跨主题
@extend——dark.scss不能@extendlight.scss里的占位符，否则形成隐式依赖链
真正容易被忽略的是@use和@forward的组合：主题包内部要用@forward "vars" show $primary, $spacing精准暴露变量，而不是让下游直接@use "theme/vars"——后者会破坏主题封装边界，导致轻量主题也加载全套颜色系统。
