应为每个业务模块配置独立 SCSS 入口文件（如 dashboard.scss），按业务边界切分，首行用 @use 显式引入带命名空间的变量和 mixin，禁止 @import 重置样式，所有基础样式由顶层统一注入，模块间复用需通过抽象共享模块实现。
每个业务模块配独立入口 SCSS 文件
不要把所有模块样式塞进一个 main.scss，否则编译后 CSS 体积膨胀、tree-shaking 失效、改 A 模块样式可能意外影响 B 模块。正确做法是按业务边界切分：比如 dashboard.scss、profile.scss、settings.scss，各自只负责本模块的样式链路。
每个入口文件第一行必须用 @use 显式引入对应变量和工具，例如：
@use 'variables/dashboard' as vars; @use 'mixins/layout' as layout; @use 'components/button' as btn;
这样能确保变量作用域隔离，避免 $primary-color 在不同模块间被覆盖或误读。
- 禁止在入口文件里写
@import 'base/reset'—— 重置应由最顶层应用统一注入，模块入口只管“增强” - 入口文件末尾只放
@include调用，不直接写样式规则；所有具体样式收进_index.scss或组件文件中 - Vite/Webpack 构建时需配置多 entry，例如 Vite 的
build.rollupOptions.input列出所有模块入口，否则只会编译第一个
变量与 mixin 必须带命名空间导入
如果多个模块都 @use 'utils/mixins' 却不加 as，Sass 会把所有 mixin 注入全局作用域，导致 @include transition() 冲突或覆盖。命名空间不是可选项，是隔离前提。
立即学习“前端免费学习笔记（深入）”；
例如：@use 'utils/mixins' as u; 后，调用必须写成 @include u.transition(all 0.2s)；变量同理：color: u.$text-secondary;
- 别图省事写
@use 'utils/mixins';—— 这等于放弃作用域控制，后续排查样式来源会卡死 - 变量文件（如
_variables.scss）里不要用@forward导出裸变量名，否则@use 'variables'会直接污染当前作用域 - 若某模块需要定制颜色，应在该模块变量文件中定义
$dashboard-primary: #2563eb;，而非复用全局$primary-color
公共基础样式不能由模块入口重复引入
像 normalize.css、字体声明、CSS 自定义属性定义这些基础层，一旦被多个模块入口各自 @use 或 @import，就会在最终 CSS 中重复出现——哪怕内容完全一样，浏览器也不会去重，反而增大体积、拖慢解析。
正确路径只有一条：由应用最顶层（如 main.tsx 中的 import './styles/index.scss'）统一引入一次，且仅此一处。
-
index.scss里可以@use 'base/reset'和@use 'base/variables'，但所有业务模块入口文件禁止再 import 它们 - 模块内要用 CSS 变量（如
--color-primary），直接color: var(--color-primary)即可，无需重新导入变量文件 - 如果构建后发现某模块 CSS 里出现了
* { box-sizing: border-box }两次，说明有模块入口偷偷引入了 reset —— 必须定位并删掉
模块间样式复用要靠抽象，不是靠 @use 路径跳转
当 profile.scss 需要用到 dashboard 里的卡片样式时，不要写 @use '../dashboard/components/card' as card; —— 这会造成隐式耦合，未来 dashboard 重构 card 结构，profile 就会挂掉。
真正可持续的做法是把可复用逻辑抽成独立模块，比如 shared/_card.scss，再由双方分别 @use 'shared/card' as card;。
- 共享模块必须无业务语义，只封装原子能力：边框半径、阴影层级、响应式断点 mixin
- 禁止在共享模块里引用业务变量（如
vars.$dashboard-accent），它只能依赖base/variables或 CSS 自定义属性 - 如果两个模块对“按钮大小”理解不同，就不要强行复用同一个
_button.scss，宁可各自维护_button.scss，用相同 mixin 抽象尺寸逻辑
模块入口的复杂点不在怎么写，而在于“谁有权决定样式生效范围”。一个 @use 语句的位置，决定了变量是否泄漏、mixin 是否冲突、reset 是否重复——这些都不是编译报错，而是上线后才浮现的层叠污染。
