【问题标题】：Is it possible to inject NODE_ENV param into sass file using Webpack & sass loader?是否可以使用 Webpack 和 sass 加载程序将 NODE_ENV 参数注入 sass 文件？
【发布时间】：2016-06-15 11:55:28
【问题描述】：

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

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

【问题讨论】：

标签： sass webpack libsass webpack-style-loader sass-loader

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

webpack.config.js

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

【讨论】：

我可以在不弹出我的应用程序的情况下执行此操作吗？

【解决方案3】：

您可以尝试`sass-loader` 的`prependData` 选项

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

prependData 还接受 function 接收 loaderContext ，您可以使用它使其更具动态性。一旦你实现了这个；你可以：

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

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

祝你好运……

【讨论】：

我可以在没有eject 我的应用程序的情况下执行此操作吗？
嗨@FabianoLothor，你能详细说明你的问题吗？
使用 create-react-app 我无法手动配置 webpack，它是预先配置好的。只有当我决定退出应用程序时，我才能设置 webpack。
@FabianoLothor，你可以试试craco。参考博客：Customize Webpack Config。祝你好运...

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

您可以尝试`sass-loader` 的`prependData` 选项