在 Next.JS 中从 SASS 访问环境变量 [英] Access Environment Variables from SASS in Next.JS

问题描述

我正在尝试将一个变量添加到我的 scss 文件中，引用 .env 变量.为此，我阅读了一些教程，发现 this.我需要将此配置添加到我的 next.config.js

I am trying to add a variable to my scss files, referenced to .env variable. To achieve this, I've read a few tutorials, and I found this. I need to add this configuration to my next.config.js

const withImages = require('next-images');

module.exports = withImages({
    webpack(config, options) {
        config.module.rules.push({
            test: /.s[ac]ss$/i,
            use: [
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 2,
                        modules: {
                            compileType: 'module'
                        }
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        additionalData: `$cdnURL: '${process.env.NEXT_PUBLIC_CDN_URL}';`
                    }
                }
            ]
        })
        return config
    }
})

如您所见，我删除了 style-loader，因为我得到 这个错误.因此，当我删除它时，我可以继续.我能够添加环境变量；但是，我将覆盖 next 的默认 scss 配置.所以每当我试图构建我的项目时，我都会收到这个warning:

As you can see, I remove the style-loader, because I am getting this error. So when I remove this, I am able to proceed. I was able to add the environment variable; however, I am overriding the default scss configuration of next. So whenever I am trying to build my project, I got this warning:

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

应用程序正在运行，但我认为 scss 并未捆绑为模块.

The application is running, but the scss was not bundled as a module I believe.

那么无论如何我可以将我的 environment variable 添加到 scss 而不覆盖整个 next.js 配置?

So is there anyway wherein I can add my environment variable to scss without overriding next.js configuration as a whole?

推荐答案

您需要修改内置的，而不是为 sass-loader 添加额外的配置.

Instead of adding an additional configuration for sass-loader you need to modify the built in one.

目前还没有官方的方式来修改它，但是传递给你的config包含了默认值，你只需要做的，就是搜索具体的loader，修改一下.

There is no official way to modify it yet, but the config that is passed to you contains the default, all you need to do, is to search for the specific loader and modify it.

此示例基于 Next.js v9.5.2.您需要使用 prependData 而不是使用 additionalData，因为这是 sass-loader 的 API Schema 上的内容

This example is based on Next.js v9.5.2. Instead of using additionalData, you need to use prependData since that is what on the API Schema of sass-loader

config.module.rules
  .filter((rule) => !!rule.oneOf)
  .forEach((rule) => {
    rule.oneOf
      .filter((oneOfRule) => {
        return oneOfRule.test
          ? oneOfRule.test.toString().includes('sass') &&
              Array.isArray(oneOfRule.use) &&
              oneOfRule.use.some((use) => use.loader.includes('sass-loader'))
          : false;
      })
      .forEach((rule) => {
        rule.use = rule.use.map((useRule) => {
          if (useRule.loader.includes('sass-loader')) {
            return {
              ...useRule,
              options: {
                ...useRule.options,
                prependData: `$cdnURL: '${process.env.NEXT_PUBLIC_CDN_URL}';`,
              },
            };
          }
          return useRule;
        });
      });
  });

在 Next.js v9.5.4 及更高版本上，您应该使用 additionalData.

On Next.js v9.5.4 and later, you should use additionalData.

这篇关于在 Next.JS 中从 SASS 访问环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！