构建时注入环境变量控制css行为，vite通过define传入sass变量并用@if条件编译，webpack配合defineplugin与sass-resources-loader实现；cdn路径须由js动态加载或css变量管理，禁用运行时js切换以防fouc和ssr不一致。
构建时用 Vite / Webpack 注入环境变量控制 CSS 行为
纯 CSS 没有 if 语句，也不能读取 location.hostname，所以“按域名切样式”必须在构建阶段完成。Vite 和 Webpack 都支持把环境变量传给预处理器（如 Sass），让编译器生成不同结果。
常见错误是试图在 CSS 里写 @if $domain == 'localhost' —— 这个变量根本没被注入，Sass 编译直接报错 Undefined variable "$domain"。
- Vite 中需在
vite.config.ts里用define显式传入，例如：define: { '__DOMAIN__': JSON.stringify(import.meta.env.VITE_APP_DOMAIN) } - Sass 文件中要写成
$domain: #{__DOMAIN__};（注意#{}是 Sass 字符串插值语法，不是 JS 模板字面量） - Webpack 需配合
DefinePlugin+sass-resources-loader或自定义additionalData注入变量
Sass 条件编译生成不同域名的样式规则
注入变量后，真正起作用的是 @if + @else 块。比如调试边框只在开发域名生效：
$host: #{__DOMAIN__};
<p>@if $host == 'localhost' or $host == '127.0.0.1' {</p>
- { outline: 1px solid #ff6b6b !important; } }
@if $host == 'staging.example.com' { :root { --primary-color: #4ecdc4; } }
@if $host == 'app.example.com' { :root { --primary-color: #45b7d1; } }
关键点：所有分支必须在构建时可静态判断，不能依赖运行时值；== 比较的是字符串字面量，大小写敏感；多个域名建议用 index-of 或 map 查找，避免长链 or。
CDN 资源路径和字体 URL 必须由 JS 控制拼接
CSS 里写死 url(https://cdn-dev.example.com/font.woff2) 是反模式 —— 构建产物无法复用，缓存失效，上线还得改文件。
正确做法是把域名抽象成变量，由 JS 在加载时注入：
- 在入口 JS 中根据
import.meta.env.VITE_CDN_HOST动态创建<link rel="stylesheet">标签 - 或用 CSS 变量统一管理：
:root { --cdn-url: #{env('VITE_CDN_HOST')}; }，然后在 CSS 中写background: url(var(--cdn-url) + '/img/logo.png');（注意：原生 CSS 不支持字符串拼接，此写法仅 Sass 支持） - 字体资源必须加
crossorigin="anonymous"，否则即使路径对，浏览器也会因 CORS 拒绝应用样式
为什么不能在 HTML 里用 JS 检测 location.hostname 切 CSS
看似简单，但实际会触发 FOUC（Flash of Unstyled Content）：HTML 先渲染无样式的 DOM，等 JS 执行完才插入 link，用户看到白屏或错乱布局。SEO 也不友好，爬虫可能只抓到未样式化的内容。
更隐蔽的问题是 SSR 场景下，服务端渲染的 HTML 和客户端 JS 插入的样式不一致，导致 React/Vue 报 Hydration failed 警告。
真正安全的运行时切换，只适用于：纯前端小项目、允许 FOUC、且明确放弃 SEO 和 SSR 的场景。生产级应用一律走构建时注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
