sass无法感知环境变量，$env报undefined是因为构建工具未显式注入；需通过webpack additionaldata、vite css.preprocessoroptions.sass.define或sass cli --define传入，并用@debug验证类型与值。
不能靠 Sass 自身“感知”环境来切换输出路径 —— 输出路径由构建工具或 CLI 决定，Sass 只管生成 CSS 内容。
为什么 $env 在 @if 里总报 undefined
Sass 编译器不读取 process.env，$env 不是内置变量。你写 @if $env == "production" 之前，必须让构建流程提前把值塞进 Sass 上下文，否则直接编译失败。
- Webpack：在
sass-loader的additionalData里注入，例如additionalData: '$env: "' + process.env.NODE_ENV + '";' - Vite：必须配到
css.preprocessorOptions.sass.define，不是define全局配置，例如{ env: JSON.stringify(process.env.NODE_ENV) } - CLI（
sass命令）：用--define=env="production"，漏掉双引号或等号会静默失效 - 务必加
@debug $env;在条件前，确认它存在且是 string 类型 ——type-of($env)返回null或bool就说明传错了
输出路径和环境变量其实是两件事
输出路径（比如 dist/css/ 还是 public/css/）由构建工具控制，跟 $env 无关；而 $env 只影响编译出的 CSS 内容（比如是否启用压缩样式、是否插入 debug 注释）。
- Webpack：输出路径由
output.path和MiniCssExtractPlugin.filename控制，与 Sass 变量无关 - Vite：由
build.outDir和css.codeSplitting决定，sass.define不改路径 - VS Code Live Sass Compiler：靠
liveSassCompile.settings.formats.savePath配置，例如"./dist/css"，不识别任何 Sass 变量 - WebStorm：在 File Watcher 的 Arguments 里硬编码路径，如
--no-cache --update $FileName$:./css/$FileNameWithoutExtension$.css
真正需要按环境区分输出路径时该怎么做
别试图让 Sass 决定文件存哪 —— 它没这个能力。你需要的是构建脚本层面的路径调度。
- 用不同 npm script：比如
"build:prod": "sass src:dist/css --style=compressed --no-source-map"和"build:dev": "sass src:public/css --style=expanded" - Webpack 多配置：导出两个 config 对象，分别设置
output.path为path.resolve(__dirname, 'dist')和path.resolve(__dirname, 'public') - Vite 中通过
mode切换build.outDir：mode === 'production' ? 'dist' : 'public'，再配合css.preprocessorOptions.sass.define注入$env控制样式内容 - 注意：所有路径配置都需用正斜杠
/或path.join()，Windows 下反斜杠\在某些 CLI 工具里会出错
最常被忽略的一点：$env 注入和输出路径配置是两条平行线，混在一起调就容易卡住 —— 先确保路径能写对，再验证变量是否真进了 Sass，别指望一个配置同时搞定两件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
