是否可以使用Webpack＆amp; amp ;;将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

this is the code directly from sass-loader repo.

webpack.config.js

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

Answer 2

您可以尝试prependData的{​​{1}}选项

sass-loader

{ loader: 'sass-loader', options: { prependData: '$env: ' + process.env.NODE_ENV + ';', } } 还接受prependData，该{}接收function，通过它可以使其更加动态。一旦实现了这一点；您可以：

loaderContext

更多信息在这里：https://webpack.js.org/loaders/sass-loader/#prependdata

祝你好运...

Answer 3

查看sass-loader来源并且它似乎不支持任何允许您插入变量的选项 - 因此它不可能以这种方式实现。

我认为你无法插入＆＃39;像这样的一个env / build-time变量进入你的Sass，但你可以通过创建多个Sass文件并根据条件需要你想要的（来自你的js源）来获得相同的行为。请注意，webpack解析代码中的逻辑的能力有限，但是如果你想在条件中require某些东西，条件必须检查一个布尔值才能工作。因此，如果您执行if (NODE_ENV === 'production') {...} else {...} webpack将处理所有这些条件中的所有要求。如果您执行if (IS_PROD_ENV) {...} else {...}之类的操作，其中条件值是布尔值，webpack将遵循条件逻辑并仅处理正确的require。 UglifyJS插件将为您删除不需要的条件分支。