CSS环境变量管理：本地与生产样式切换技巧

本文深入解析了前端构建中CSS环境变量管理的核心逻辑与实践陷阱，强调CSS样式切换必须在编译期（而非运行时）完成——Webpack需通过entry/rule配置或DefinePlugin配合动态import()实现环境隔离，Vite则依赖import.meta.env的静态可分析条件分支；同时指出HTML中JS动态加载CSS易引发FOUC、CSS变量仅适用于颜色间距等微调而无法剔除结构性样式、以及服务端渲染路径或产物目录分离才是最干净可靠的方案，帮助开发者避开“看似生效实则冗余打包”的常见误区。

Webpack中用环境变量控制CSS引入路径

构建时决定加载哪套样式，关键不在CSS本身，而在于模块引入时机和条件判断是否在编译期完成。运行时判断process.env.NODE_ENV没用——CSS已经打包进去了。

正确做法是在Webpack配置里根据环境变量决定entry或rules中的include/exclude，或者用DefinePlugin注入变量后，在JS入口里做if分支动态import()。但注意：动态import()会生成独立chunk，不是简单换文件名。

• 本地开发想用未压缩、带source map的CSS？配css-loader的sourceMap: true + devtool: 'source-map'，别动引入路径
• 要彻底替换整套样式（比如暗色主题切换）？把不同主题CSS写成独立入口，如./src/styles/light.css和./src/styles/dark.css，通过webpack.config.js里的entry字段按process.env.STYLE_THEME选一个
• 误在组件里写if (process.env.NODE_ENV === 'development') { require('./debug.css') }？这行在生产构建时仍会被Webpack解析并打包进去，只是执行不到——CSS还是加了

Vite里怎么让import语句随环境变化

Vite不支持在import语句里直接写表达式，import('./style.' + env + '.css')会报错。必须用import.meta.env做静态分析能识别的条件分支。

可行方式是把环境判断提到顶层，用两个独立import加if包裹，Vite能据此做静态分析并只保留命中分支的模块：

if (import.meta.env.DEV) {
  import('./styles/local.css')
} else {
  import('./styles/prod.css')
}

注意：import.meta.env.DEV是编译期常量，Vite会直接删掉未命中分支；但若写成import.meta.env.MODE === 'production'，且vite build --mode staging，这个判断就可能失效——因为MODE值是字符串，无法被静态消除。

• 确保import.meta.env用的是Vite内置变量，自定义变量（如VITE_CUSTOM_CSS）不会被静态替换，会导致两份CSS都被打包
• 如果用了css插件或postcss，记得检查postcss.config.js里有没有硬编码路径，它不读import.meta.env

HTML中通过data-env属性控制link加载

纯前端项目有时需要绕过构建工具，在HTML里手动切样式。可行，但有延迟和FOUC风险：CSS得等JS执行完才加载。

典型做法是在里先放一个空，再用内联JS读document.documentElement.dataset.env，拼出对应CSS路径后赋给href：

<script>
  const env = document.documentElement.dataset.env || 'prod'
  const link = document.getElementById('env-css')
  link.href = `/css/app.${env}.css`
</script>

问题在于：这个