Webpack环境下SCSS引入图片URL时出现编译报错问题

这个报错和linter完全无关，核心是版本适配问题：
你使用的css-loader@6.x默认以ES Module规范输出处理后的代码，生成静态资源引用逻辑时会用到import.meta.url语法，但你SCSS处理链路里的extract-loader不支持解析该语法，碰到这行代码时直接抛出了语法错误。
你当前用的sass-loader -> postcss-loader -> css-loader -> extract-loader -> file-loader是比较老旧的CSS导出方案，extract-loader已经长期没有更新适配新版loader的输出规则，和css-loader的默认输出格式不兼容。

二选一即可：

方案1：最小改动快速修复 #

直接修改css-loader配置，关闭默认的ES Module输出，强制使用CommonJS格式输出，生成的代码就能被extract-loader正常解析：
找到webpack.config.js中SCSS规则的css-loader配置项，修改为：

{
  loader: 'css-loader',
  options: {
    esModule: false
  }
},

保存后重新执行编译命令即可正常构建。

方案2：替换为官方维护方案（长期更稳定） #

extract-loader + file-loader的组合已经不再适配Webpack 5的新特性，建议替换为Webpack官方维护的mini-css-extract-plugin处理CSS导出，适配性和维护性都更好：

1. 安装依赖：

npm i -D mini-css-extract-plugin

2. 修改webpack.config.js：
   • 在文件顶部引入插件
   • 替换SCSS规则中原有的file-loader、extract-loader为插件提供的loader
   • 新增plugins配置项，指定导出的CSS文件名
     核心配置参考：

// 配置文件顶部新增引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
    filename: 'bundle.js',
  },
  mode: 'development',
  // 新增插件配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 替换原有file-loader、extract-loader
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
            // 如果后续碰到图片等资源引用解析异常，可以在这里加 esModule: false 配置
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [autoprefixer()]
              }
            } 
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              webpackImporter: false,
              sassOptions: {
                includePaths: ['./node_modules']
              }
            }
          }
        ]
      },
      // 其余loader规则保持原有配置即可
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        loader: 'url-loader'
      }
    ]
  }
};

补充说明：你当前使用的file-loader、url-loader在Webpack 5中已经被官方内置的资源模块（Asset Modules）替代，不过这部分和本次报错无关，不影响当前问题修复，可以后续按需调整。

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