$env在Sass中undefined是因为构建工具未将环境变量注入Sass编译上下文，需通过sass命令--define、Webpack additionalData或Vite css.preprocessorOptions.sass.define显式传入，且必须用双引号字符串比较并验证类型。
为什么 $env 在 Sass 里总是 undefined
根本原因是环境变量没被正确注入到 Sass 编译上下文。Webpack、Vite 或 CLI 工具默认不会把 Node.js 环境变量（如 process.env.NODE_ENV）自动传给 Sass，你写的 @if $env == "production" 里 $env 根本没声明过，Sass 直接报 Undefined variable。
常见错误现象：
- 在 Vue 的
webpack.utils.js里写了define: { 'process.env.ENV': JSON.stringify('dev') }，但 Sass 读不到——Sass 不解析 JS 对象 - 用
sass --load-path=src main.scss直接编译，没加--define=env=dev参数 - 在 Vite 中用了
define配置，但没配css.preprocessorOptions.sass.define
实操建议：
- CLI 编译时显式传参：
sass --define=env="production" src/main.scss dist/main.css - Webpack + sass-loader：在
options.additionalData或implementation配置中注入变量，例如additionalData: '$env: "' + process.env.NODE_ENV + '";' - Vite：在
vite.config.ts的css.preprocessorOptions.sass.define下写{ env: JSON.stringify(process.env.NODE_ENV) } - 务必用
@debug $env;放在@if前验证变量是否已存在且类型正确
@if $env == "production" 为什么没进分支
即使 $env 存在，也可能因类型或值不匹配导致条件失效。Sass 的字符串比较严格，"production "（末尾空格）、"Production"（大小写）、'production'（单引号变量名）都会失败。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一用双引号包裹字符串：
@if $env == "production"✅，别写@if $env == production❌（会被当未定义变量） - 用
type-of($env)确认是string，不是null或bool - 避免依赖外部配置未加载完成：如果
$env来自@import 'config'，确保config.scss在条件语句前@import - 补全所有分支：
@else if $env == "development"后必须跟@else，否则测试环境没定义时样式直接丢失
开发环境样式覆盖生产环境的坑怎么避
多个 @if 分支生成的选择器权重相同，后编译的规则会覆盖前面的——比如开发环境样式写在文件底部，它反而生效，导致线上出 bug。
实操建议：
- 把环境相关样式抽成独立文件，按顺序
@import：@import "env/base"; @import "env/production"; @import "env/development"; - 用更具体的选择器提升权重，例如生产环境加
.env--prod类，开发环境用.env--dev，再配合属性选择器写[data-env="production"] .btn - 禁用开发专用样式在生产构建中输出：用
@if $env == "development" { @include debug-styles; }，确保debug-styles不含任何线上逻辑 - CI 构建时加
--no-source-map和--style=compressed，避免开发用的注释或冗余规则混入生产 CSS
如何安全地在 Sass 里读取构建时的环境标志
不要试图读取 process.env、import.meta.env 或 __DEV__ 这类运行时标识——它们对 Sass 编译器不可见。唯一可靠的是构建工具明确传入的静态字符串。
实操建议：
- Webpack 中避免用
DefinePlugin注入process.env到 Sass，应改用sass-resources-loader或additionalData注入变量 - Vite 中不要在
define里写__BUILD_TIME__: new Date()——Sass 无法解析new Date()，只接受字面量字符串、数字、布尔 - 若需区分 CI/本地构建，可在 CI 脚本中设不同
--define=build_source="ci"，本地用--define=build_source="local" - 所有环境变量名统一加前缀，如
$build_env、$build_source，避免和项目内其他变量冲突
最易被忽略的一点：Sass 编译结果里完全不保留 @if 结构，一旦忘了在变量声明处加注释，半年后没人知道 $build_env 是从哪来的、有哪些合法值。
