是否可以使用Webpack和sass loader将NODE_ENV参数注入到sass文件中？

Question

我正在尝试将NODE_ENV注入一个sass文件中，因此我可以为dev / prod env提供不同的输出，并拥有一个内部具有类似条件的sass函数： @if (NODE_ENV == 'prod') {}

我的webpack.config看起来像这样：

module: {
    loaders: [{
        test: /\.scss$/,
        loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
    }]
}

我尝试将数据参数传递给加载程序，但没有任何效果。将不胜感激！

Answer 1

这是直接来自sass-loader repo的代码。

webpack.config.js

... sassLoader: { data: "$env: " + process.env.NODE_ENV + ";" } ...

Answer 2

查看了sass-loader源代码，它似乎不支持任何允许您插入变量的选项——所以这种方式是不可能的。

我不认为你能够像这样将 env/build-time 变量“插入”到你的 Sass 中，但是你可以通过创建多个 Sass 文件并要求你想要的文件（来自你的 js 源）来获得相同的行为）基于条件。请注意，webpack 解析代码中逻辑的能力有限，但是，如果您想要require条件语句中的某些内容，则条件语句必须检查布尔值才能正常工作。因此，如果您这样做，if (NODE_ENV === 'production') {...} else {...}webpack 将处理所有这些条件下的所有需求。如果你做了类似的事情if (IS_PROD_ENV) {...} else {...}，其中​​条件值为布尔值，webpack 将遵循条件逻辑并仅处理正确的require. 该UglifyJS插件将为您删除不需要的条件分支。