可通过动态引入CSS实现环境样式分离：构建时用Webpack/Vite等工具根据环境变量注入，SSR框架在模板或head中条件加载，纯前端则运行时检测域名/端口并动态创建link标签。
可以通过在 HTML 中根据环境变量动态引入不同 CSS 文件来实现开发与生产环境样式分离。关键在于构建时或运行时识别环境，并控制 link 标签的 href 属性。
构建时通过预处理器或打包工具注入
使用 Webpack、Vite 或 Rollup 等工具，在构建阶段根据 process.env.NODE_ENV 决定引入哪个 CSS 文件。
- Vite 中可在
index.html使用环境变量内联逻辑（需配合插件或服务端渲染）；更稳妥的方式是在入口 JS 中动态加载：
if (import.meta.env.DEV) {
import('./assets/dev.css');
} else {
import('./assets/prod.css');
}
Webpack 可借助 DefinePlugin 注入全局变量，再用 JS 控制 link 标签创建。
HTML 模板中条件判断（适合 SSR 或静态生成）
若项目有服务端渲染能力（如 Next.js、Nuxt），可在模板中直接判断环境：
立即学习“前端免费学习笔记（深入）”；
- Next.js 的
document.head操作需在useEffect中进行，避免服务端报错； - Nuxt 可在
app.html或布局文件中用v-if="$route.path"类似逻辑，但更推荐用head()方法动态设置：
head() {
return {
link: [{
rel: 'stylesheet',
href: process.env.NODE_ENV === 'development'
? '/css/dev.css'
: '/css/prod.css'
}]
}
}
纯前端运行时检测（简单项目适用）
若无法修改构建流程，可在 HTML 底部加一段内联脚本判断当前域名或 URL 特征：
- 开发环境常用
localhost、127.0.0.1或带:3000端口； - 生产环境通常为正式域名，如
example.com； - 动态创建 link 标签并插入 head：
<script><br>const isDev = location.hostname === 'localhost' || location.port === '3000';<br>const cssUrl = isDev ? '/css/dev.css' : '/css/prod.css';<br>const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = cssUrl;<br>document.head.appendChild(link);<br></script>
避免样式冲突的关键细节
不同环境 CSS 文件应保持选择器一致、结构对齐，仅调整颜色、间距、动画等视觉参数：
- 不要在 dev.css 中加调试用的
border: 1px solid red后又忘记删，导致线上漏出； - 建议将公共样式抽成
base.css，再用dev.css和prod.css覆盖变量或局部规则； - 利用 CSS 自定义属性（CSS Variables）统一管理主题色、断点等，环境切换只需替换 :root 块。
