SCSS无法直接读取环境变量，因其编译器（Dart Sass）纯静态、不执行JS、不解析Webpack/Vite注入的process.env或import.meta.env；有效方案是构建阶段控制文件引入或通过JS动态注入类名控制样式。
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 或配置中做条件加载。
- 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 }"> - SCSS 中写：
.dev-mode .button { outline: 2px solid red !important; } .dev-mode [data-test] { background: rgba(255, 255, 0, 0.3); } - 这样既避免了 SCSS 环境逻辑，又保证开发样式只在 dev 构建中生效（因为
import.meta.env.DEV在 prod 构建中被替换成false，整个 class 绑定不会存在）
最易被忽略的一点：很多人花几小时调 @if $NODE_ENV == 'production'，却没意识到 Dart Sass 根本不连构建系统。真正的开关永远在 JS 入口或构建配置里，SCSS 只负责写好样式，别越界。
