sass import 后条件编译无效

[BlackCubeNo99]

/* common.scss */
.test {
  // #!if NODE_ENV === 'production'
  color: red;
  // #!elseif NODE_ENV === 'development'
  color: blue;
  // #!endif
}

/* index.scss */
@import './common.scss'

当前 NODE_ENV 为 'development'，index.scss 最终编译后的是 color: red。

[afterwind-io]

@BlackCubeNo99 我在本地测试了一下你的代码，最终的结果为：

/* common.scss */
.test{ color: red; color: blue; }

说明sass在处理@import导入的文件时，不会经过webpack的loader处理环节。

这个问题与sass的处理逻辑有关，而且从sass的视角来看这样做是合理的。建议可以考虑给sass-loader寄相关问题确认一下。

P.S. 我本地使用的相关版本：

"dependencies": {
    "css-loader": "^6.2.0",
    "sass": "^1.37.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.47.1"
    "webpack-preprocessor-loader": "^1.1.4",
},

[BlackCubeNo99]

@afterwind-io 是的，最终结果是 color: red; color: blue;，我的描述漏了，我看下 sass-loader，感谢解答。