HTML 本身无法根据环境条件加载不同样式表，必须通过构建工具（如 Webpack/Vite）在构建时生成对应 link 标签、服务端模板渲染时判断，或在 head 中内联 JS 同步动态插入 link 元素。
怎么在 HTML 中根据环境加载不同
直接靠 HTML 本身做不到环境判断， 是静态标签，没有条件逻辑。必须借助构建工具、服务端模板，或极简的客户端 JS 注入来实现。最稳妥且通用的方式是：**构建时替换，而非运行时判断**。
常见错误是试图用 window.location.hostname 或 process.env.NODE_ENV 直接写在 HTML 里——前者在纯静态 HTML 中不可用（没 JS 执行），后者在浏览器端根本不存在（那是 Node.js 构建时的变量）。
- Webpack/Vite 等构建工具可通过
html-webpack-plugin或inject: false+ 模板字符串注入对应或 - 服务端渲染（如 Express/Nuxt）可在模板中用
process.env.NODE_ENV === 'production'控制输出哪条 - 若真要纯前端轻量方案，可用一小段内联 JS 在
顶部动态创建，但需确保它在任何 CSS 依赖前执行
用内联 JS 动态插入
关键点：不能等 DOMContentLoaded，否则页面可能闪动或样式错乱；必须同步插入，且放在所有其他样式之前。推荐在 最上方用 同步执行。
注意：location.hostname 不可靠（本地开发可能是 localhost、127.0.0.1 或自定义 host），建议配合 URL 路径或 query 参数增强判断，例如：location.search.includes('env=dev')。
立即学习“前端免费学习笔记（深入）”；
Webpack/Vite 构建时区分 CSS 输出路径和引用
核心不是“加载时选”，而是“构建时生成两套文件，并只让 HTML 引用其中一套”。Vite 默认不支持多环境 HTML 输出，需配合 vite-plugin-html 或自定义插件。
- Webpack：用
html-webpack-plugin的templateParameters传入cssHref: isProduction ? 'app.min.css' : 'app.debug.css'，模板中写 - Vite：启用
build.rollupOptions.output.manualChunks分离 dev-only 样式（如console.css），再通过transformIndexHtml钩子修改列表 - 别把开发专用样式（如组件边框高亮、状态标记）打进生产包——用
if (process.env.NODE_ENV === 'development')包裹 import，Webpack 会自动 tree-shake 掉
为什么不用 CSS @import 或媒体查询做环境区分
@import 是 CSS 规则，无法读取运行时环境变量；媒体查询（@media）只响应设备特征，跟部署环境无关。试图用 @media (env: production) 是无效的——CSS 标准里根本没有这种语法。
有人试过用 :root 自定义属性 + JS 设置，再用 attr()，但 attr() 当前仅支持 content 属性，不能用于 background 或 color 等大多数样式，实用性为零。
真正需要环境差异的，比如开发时显示组件名称浮层、禁用 CSS 动画加速调试、暴露设计网格线——这些都该用独立的 dev-only CSS 文件，由构建流程决定是否引入，而不是靠 CSS 自身去“猜”环境。
