不能用 HTML link 的 media 属性做环境区分，它仅响应媒体查询而非 NODE_ENV；正确做法是在构建阶段（如 Webpack 或 Vite）通过 JS 条件导入不同 CSS 文件，或用 CSS 自定义属性配合 JS 注入主题值。
如何用 CSS 链接标签的 media 属性做环境区分？
不能。HTML 的 <link rel="stylesheet"> 标签不支持基于环境变量动态切换 href，media 属性只响应媒体查询（如 prefers-color-scheme 或 screen），和 Node.js 或构建环境里的 NODE_ENV 无关。
真正可行的路径只有一条：在构建阶段注入环境感知逻辑，让 CSS 文件本身或加载行为随环境变化。
Webpack 中如何根据 NODE_ENV 动态引入不同 CSS？
在 JS 入口里用 require 或 import，配合 Webpack 的 DefinePlugin 或直接读取环境变量：
- Webpack 配置中用
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) - JS 中写：
if (process.env.NODE_ENV === 'development') { require('./styles/dev.css'); } else { require('./styles/prod.css'); } - 注意：Webpack 5 默认启用
mode，process.env.NODE_ENV在 production 下会被内联为字符串字面量，确保 tree-shaking 正常工作 - 避免在 CSS 文件里写
@import动态路径——它不解析 JS 变量，且无法被 Webpack 处理
Vite 项目怎么让 CSS 加载适配 import.meta.env.MODE？
Vite 的 import.meta.env 是编译时注入，不能用于 CSS 的 @import 或 <link> 的属性绑定，但可在 JS 中条件导入：
立即学习“前端免费学习笔记（深入）”；
- 使用
import.meta.env.DEV判断更直观：if (import.meta.env.DEV) { import('./styles/debug.css'); } else { import('./styles/index.css'); } - 若需全局样式且不想拆分 JS 逻辑，可改用 CSS 自定义属性 + JS 注入主题值，把差异控制在变量层而非文件层
- 不要试图在 HTML 模板中用
<link href="/css/{import.meta.env.MODE}.css">——模板不执行 JS 表达式，会 404
为什么直接在 HTML 里写两个 <link> 并用 JS 切换 disabled 不可靠？
看似简单，但有三个硬伤：
- CSS 加载是异步的，
disabled切换后浏览器不会重新解析规则，旧样式残留风险高 - 开发工具（如 DevTools 的 Styles 面板）仍显示所有规则，干扰调试，尤其当两套样式有同名选择器时
- 生产环境多加载一个未使用的 CSS 文件，增加首屏体积和 HTTP 请求数，违背优化原则
- 如果依赖 CSSOM 操作（比如
getComputedStyle），disabled状态下该 sheet 不参与计算，行为与预期不符
真正要区分环境样式，就得让构建工具“知道”你在做什么——否则它只会把所有 <link> 当静态资源照单全收。
