如何快速管理多个站点 使用Sass配置不同站点的变量集实战案例|Duuu笔记
必须用多入口编译实现站点样式隔离：每个站点建独立入口文件（如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.s
css
: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 本身去解决站点分发问题。
白瓜AI
白瓜AI，一个免费图文AI创作工具，支持 AI 仿写，图文生成，敏感词检测，图片去水印等等。
下载
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
。
