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

问题描述

我试图将一个变量添加到我的 scss 文件中，并引用 .env 变量.为此，我阅读了一些教程，发现此.我需要将此配置添加到我的 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 ，因为我得到了

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变量添加到 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 包含默认值，您只需要做的是搜索特定的加载程序并对其进行修改.

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 .代替使用 additionalData ，您需要使用 prependData ，因为这是 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 .

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