如何配置Next.js使其在编译SCSS文件时正确识别data URL资源

问题原因 #

Next.js 内置的 css-loader 默认会解析所有 CSS/SCSS 中的 url() 引用，将其当作本地资源模块处理，因此会误把 data URL 拼接上当前 SCSS 文件的相对路径，导致模块找不到的报错。

解决方法 #

方法1：修改 Next.js 全局配置，排除 data URL 解析 #

在项目根目录的 next.config.js 中添加 webpack 规则，调整 css-loader 的 url 配置，忽略所有 data: 开头的链接：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 遍历所有规则找到处理scss/sass的css-loader配置
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test?.toString().includes('scss') || oneOfRule.test?.toString().includes('sass')) {
            oneOfRule.use.forEach(use => {
              if (use.loader?.includes('css-loader')) {
                // 配置url解析过滤规则，data开头的链接不做模块解析
                use.options.url = {
                  filter: (url) => !url.startsWith('data:')
                }
              }
            })
          }
        })
      }
    })
    return config
  },
  sassOptions: {
    // 可按需添加foundation-sites的scss导入路径
    // includePaths: [path.join(__dirname, 'node_modules/foundation-sites/scss')]
  }
}

module.exports = nextConfig

配置完成后重启开发服务即可生效。

方法2：临时适配方案（无需修改构建配置） #

如果不想调整全局配置，也可以在导入 foundation-sites 的 scss 文件前，提前覆盖框架中使用 data URL 的相关变量，通过 #{} 语法强制 Sass 不解析内部的 url 内容：

// 提前覆盖内置的下拉框箭头等使用data URL的变量
$form-select-arrow: url("#{'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"32\" height=\"24\" viewBox=\"0 0 32 24\"><polygon points=\"0,0 32,0 16,24\" style=\"fill: #{$form-select-arrow-color}\"></polygon></svg>'}");

// 变量覆盖完成后再导入foundation的scss代码
@import 'foundation';

内容的提问来源于stack exchange，提问作者Tim VanderZwaag