8

我正在尝试将 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")
    }]
}

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

4

3 回答 3

7

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

webpack.config.js

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

于 2016-04-21T21:50:19.123 回答
3

您可以尝试以下prependData选项sass-loader

{
  loader: 'sass-loader',
  options: {
    prependData: '$env: ' + process.env.NODE_ENV + ';',
  }
}

prependData还接受 a functionwhich 接收loaderContext您可以使其更具活力的。一旦你实现了这个；你可以 ：

@if ($env == 'prod') {}

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

祝你好运...

于 2019-10-04T08:39:34.997 回答
0

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

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

于 2016-03-02T16:26:17.810 回答