CSS环境差异需通过构建阶段注入变量或条件逻辑实现，而非CSS本身区分；借助Webpack、Vite等工具或Sass/Less等预处理器，在编译时生成不同样式，禁止运行时检测。
在 CSS 开发中，开发与生产环境的样式配置差异（比如调试边框、日志样式、字体加载策略、CDN 资源路径等）通常**不靠 CSS 文件本身区分，而是通过构建阶段注入变量或条件逻辑来实现**。纯 CSS 没有运行时环境判断能力，必须借助构建工具（如 Webpack、Vite、Rollup）或预处理器（如 Sass、Less）在编译时生成不同结果。
使用构建时环境变量注入 CSS 变量
主流方式是将环境变量传入 CSS 预处理器或 CSS-in-JS 工具，在构建时生成对应样式。例如：
- Vite 中通过 define 注入全局常量，配合 Sass 的 if 判断生成不同规则：
// vars.scss
$debug-border: #{env('VITE_DEBUG_BORDER') == 'true'}; // 构建时计算布尔值
@if $debug-border {
* { outline: 1px solid red !important; }
}启动命令区分：
dev: vite --mode development（.env.development 中设 VITE_DEBUG_BORDER=true）
build: vite build --mode production（.env.production 中设 VITE_DEBUG_BORDER=false）
动态切换 CSS 类名或资源路径
对 CDN 字体、图标、主题色等需环境适配的资源，可在 JS 层控制引入路径，再由 CSS 响应：
立即学习“前端免费学习笔记（深入）”；
- Webpack 中用 DefinePlugin 注入
__CDN_BASE__，JS 动态插入 link 标签指向不同域名的 CSS； - Vite 中用 import.meta.env.BASE_URL 或自定义变量拼接字体 URL，避免硬编码；
- 关键样式（如 loading 动画）可写两套 class（
.spinner-dev/.spinner-prod），JS 根据import.meta.env.PROD添加对应类。
分离样式逻辑：CSS Modules + 构建条件导入
将环境敏感样式抽成独立模块，用 JS 控制是否导入：
// main.css
@import './base.css';
/* 开发专用样式仅在非生产环境引入 */
@if not $is-production {
@import './debug.css';
}配合构建配置传递 $is-production: true（Sass）或使用 PostCSS 插件（如 postcss-env-function）做条件编译。
避免运行时检测，杜绝 CSS 中写 JavaScript
切勿在 CSS 里尝试用 @media (env(dev)) 或伪类模拟环境判断——这些语法不存在，也不被支持。所有环境分支必须在构建阶段收敛为确定的 CSS 输出。调试信息建议用 source map + 浏览器 devtools 查看原始 SCSS/Less，而非依赖 CSS 内容开关。
