如何在SCSS中判断当前环境是否为生产环境_设置CSS编译开关-css教程-PHP中文网

scss无法直接读取环境变量，因其编译器（dart sass）纯静态、不执行js、不解析webpack/vite注入的process.env或import.meta.env；有效方案是构建阶段控制文件引入或通过js动态注入类名控制样式。

如何在scss中判断当前环境是否为生产环境_设置css编译开关

SCSS 本身没有运行时环境判断能力，process.env.NODE_ENV、VUE_APP_ENV 这类变量在 SCSS 编译阶段根本不可见——它们是 JS 运行时或构建工具注入的，而 SCSS 编译器（Dart Sass）只认静态语法和预处理器指令。所以「在 SCSS 里写 @if $env == 'production'」这条路走不通。

为什么不能在 SCSS 中直接读取环境变量

Dart Sass 是纯静态编译器，不执行 JS，也不解析 Webpack/Vite 的 DefinePlugin 或 import.meta.env。你写的 $env: #{"process.env.NODE_ENV"}; 不会求值，只会原样输出字符串 process.env.NODE_ENV 到 CSS 里，毫无意义。

所有 @if、@else 分支必须基于已知的、编译期可确定的值（比如硬编码变量、函数返回值、feature-exists() 等）
@import 和 @use 的路径也不能动态拼接；@use "themes/#{$theme}"; 是非法语法
试图用 #{} 插值注入环境变量，结果只是字面量字符串，不是运行时替换

真正有效的环境区分方式：构建阶段控制文件引入

核心思路是：让构建工具决定“哪套 SCSS 被编译”，而不是让 SCSS 自己判断环境。Vue CLI、Vite、Webpack 都支持在入口 JS 或配置中做条件加载。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Vite 项目中，在 main.ts 或 main.js 里写：

if (import.meta.env.PROD) {
  import('@/styles/main.prod.scss');
} else {
  import('@/styles/main.dev.scss');
}

Vue CLI 项目可配合 vue.config.js 的 configureWebpack，用 DefinePlugin 注入全局常量，再在 JS 入口里做 if (IS_PRODUCTION) { ... } 动态 import()
如果必须共用一个入口 SCSS 文件，就拆出两套 partial：_variables.prod.scss 和 _variables.dev.scss，然后由构建脚本在打包前复制/链接对应版本到 _variables.scss，再 @import "_variables"

开发期调试样式：用 CSS 类名 + 构建时开关更可靠

想在开发环境加边框、高亮、日志样式？别在 SCSS 里写条件，改用统一类名 + 构建时注入开关：

在根组件（如 App.vue）上动态加 dev-mode 类：

<div :class="{ 'dev-mode': import.meta.env.DEV }">
<li>SCSS 中写：<pre class="brush:php;toolbar:false;">.dev-mode .button {
  outline: 2px solid red !important;
}
.dev-mode [data-test] {
  background: rgba(255, 255, 0, 0.3);
}