webpack - 在 Next.JS 中从 SASS 访问环境变量

Question

我正在尝试向我的 scss 添加一个变量文件，引用 .env多变的。为了实现这一点，我阅读了一些教程，我发现 this .我需要将此配置添加到我的 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 ，因为我收到 this error .所以当我删除它时，我可以继续。我能够添加环境变量；但是，我覆盖了默认值 scss configuration的 next .所以每当我尝试构建我的项目时，我都会收到这个 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我相信没有捆绑为一个模块。
所以无论如何我可以添加我的 environment variable至 scss不覆盖 next.js整体配置？

Answer 1

而不是为 sass-loader 添加额外的配置你需要修改内置的。
没有官方 尚未修改它的方法，但是 config传递给您的包含默认值，您需要做的就是搜索特定的加载程序并修改它。
此示例基于 Next.js v9.5.2 .而不是使用 additionalData ，您需要使用 prependData因为这就是 API Schema 上的内容的 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 .