scss 的 @if 无法自动感知环境，必须由构建工具（如 dart sass cli、webpack defineplugin、vite）显式注入 $env 变量；未注入则报错，且条件分支在编译时固化，需覆盖所有取值并注意字符串引号、括号包裹逻辑、真值规则及后续 css 加载控制。
@if $env == "development" 无法自动感知环境，必须靠构建工具注入变量后才能生效。SCSS 本身没有运行时环境概念，所有条件分支都在编译那一刻固化进输出文件——你看到的“开发版 CSS”和“生产版 CSS”，本质是两次独立编译的结果，不是一次编译里动态切换出来的。
必须用构建工具传入 $env 变量，否则 @if 直接报错
SCSS 的 @if 指令读不到 process.env.NODE_ENV 或浏览器 URL，它只认你在编译前显式塞进去的 Sass 变量。没传值就用 $env，Sass 会抛出 Undefined variable "$env"。
- 用 Dart Sass CLI：运行
sass --define=env=development main.scss:dist/main.dev.css和sass --define=env=production main.scss:dist/main.prod.css - Webpack 中通过
DefinePlugin注入：new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' })，再在 SCSS 里写$env: process.env.NODE_ENV;（注意引号要保留） - Vite 需在
vite.config.ts的css.preprocessorOptions.sass.additionalData里拼接：'$env: "' + process.env.MODE + '";'
字符串比较必须加引号，布尔值判断要小心真值规则
@if $env == "development" 是对的；@if $env == development 是错的——后者会被解析成变量 $development，而它根本不存在。
-
$debug: true→@if $debug为真；$debug: false或$debug: null才为假 -
0、空字符串""、空列表()在 Sass 里全是“真值”，别指望它们能触发@else - 多条件必须加括号：
@if ($env == "development") and ($theme == "dark")，漏括号会导致逻辑短路或类型错误
分支必须覆盖全部可能取值，否则样式会彻底消失
只写 @if $env == "production" 而不配 @else，那当 $env: "development" 时，对应那段样式就不会出现在最终 CSS 里——不是留空，是压根不生成。
- 推荐写法：
@if $env == "production" { /* 生产专用样式 */ } @else { /* 开发专用样式 */ } - 如果支持更多环境（如
"staging"），就得用@if/@else if/@else全覆盖，不然中间状态会丢样式 - 调试时加一行
@debug "Current env is: #{$env}";，确认值和类型是否符合预期
真正容易被忽略的是：SCSS 条件编译只管“哪段代码进 CSS”，不管“CSS 怎么加载”。你得自己在 HTML 或 JS 里控制加载 main.dev.css 还是 main.prod.css，或者用 JS 切换 class 触发预编译好的 .dev-only {} 规则——这两层不能混为一谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
