必须用多入口编译实现站点样式隔离：每个站点建独立入口文件（如site-a.scss），分别引入带命名空间的变量文件（@use 'variables/site-a' as a）和公共模块，禁止在sass中用@if动态分支或@forward裸变量，构建工具（webpack/vite）配置多entry生成独立css。
怎么用Sass变量集区分不同站点的样式
直接用 $site-name 这类顶层变量做条件切换不可行——Sass编译时变量已固定，没法运行时分支。真正可行的是按站点拆成独立入口文件，每个入口只引入对应变量文件 + 公共样式逻辑。
常见错误是试图在同一个 main.scss 里写 @if $site == 'a' { ... }，结果所有站点都编译出全部样式，体积膨胀、维护混乱。
- 每个站点建一个入口文件，比如
site-a.scss、site-b.scss - 各自第一行
@use 'variables/site-a' as vars（注意路径和命名空间隔离） - 公共样式模块统一用
@use 'mixins/layout'，不依赖具体变量值 - 构建时分别编译：sass site-a.scss:css/site-a.css
Sass变量文件如何组织才不会互相污染
用 @forward 暴露变量容易翻车——一旦两个站点的变量文件都 @forward 'colors'，后面 @use 'colors' 就会冲突。必须靠命名空间硬隔离。
正确做法是变量文件不 @forward，只定义带前缀的变量，例如 $site-a-primary-color: #007bff，再在入口文件里用 @use 'variables/site-a' as a，调用时明确写 a.$primary-color。
- 禁止在变量文件里用
@forward导出裸变量名 - 变量命名强制加站点前缀：
$site-b-font-size-base，而非$font-size-base - 如果要用
@use 'variables/site-b' as b，调用必须带命名空间：b.$font-size-base - 别图省事把变量塞进
:global或!default堆里，后期改一个牵连全站
Webpack/Vite里怎么自动匹配站点入口并输出对应CSS
手动跑多次 sass 命令太原始，容易漏编译。关键不是“怎么配”，而是“怎么避免重复配置”——用构建工具的多入口能力，而不是 Sass 本身去解决站点分发问题。
Webpack 的 entry 支持对象语法，Vite 则用 build.rollupOptions.input。两者都能把 site-a.scss 和 site-b.scss 当作独立入口，生成独立 CSS 文件，且互不影响。
- Webpack 配置里设
entry: { 'site-a': './src/sites/site-a.scss', 'site-b': './src/sites/site-b.scss' } - Vite 中写
build: { rollupOptions: { input: { 'site-a': './src/sites/site-a.scss' } } } - 输出文件名用
[name].css，确保 HTML 能精准引用site-a.css - 别在 Sass 层面搞动态路径拼接，比如
@import 'variables/#{$site}'—— Sass 不支持变量控制@import路径
为什么不能用 CSS 自定义属性（CSS Variables）替代 Sass 变量做站点区分
可以，但仅限运行时主题切换场景。如果目标是构建时生成不同 CSS 文件（比如给客户A发 site-a.css，客户B发 site-b.css），CSS 变量毫无意义——它无法减少最终 CSS 体积，所有站点的规则都会打进同一个文件，只是值被替换成 var(--primary)。
真正要的是「编译时剥离」，不是「运行时注入」。Sass 变量在编译阶段就决定了哪些 CSS 规则该出现、哪些该消失；CSS 变量只是把值延迟到浏览器解析时才取。
- 构建时分站点 → 必须用 Sass 变量 + 多入口
- 运行时换主题（比如用户点按钮切深色模式）→ 才轮到 CSS 变量上场
- 混用两者？可以，但别指望 CSS 变量能帮你省下几KB的打包体积
- 注意：CSS 变量不支持媒体查询内插值，
@media (prefers-color-scheme: dark) { :root { --c: red; } }是合法的，但--c: #{$color}在 CSS 里根本不存在
最常被忽略的一点：站点变量文件里的颜色、间距这些值，一旦被其他模块（比如组件库）直接引用，就等于把耦合写死了。稳妥做法是变量只出现在入口层，组件内部永远通过 mixin 或 function 接收参数，而不是读 vars.$primary-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
