是否可以使用 Webpack 和 sass 加载程序将 NODE_ENV 参数注入 sass 文件？

Posted 2023-02-22

【中文标题】是否可以使用 Webpack 和 sass 加载程序将 NODE_ENV 参数注入 sass 文件？

【英文标题】：Is it possible to inject NODE_ENV param into sass file using Webpack & sass loader?

【发布时间】：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")
    ]

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

【参考方案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 我的应用程序的情况下执行此操作吗？

嗨@F***oLothor，你能详细说明你的问题吗？

使用 create-react-app 我无法手动配置 webpack，它是预先配置好的。只有当我决定退出应用程序时，我才能设置 webpack。

@F***oLothor，你可以试试craco。参考博客：Customize Webpack Config。祝你好运...