Webpack 5迁移：mini-css-extract-plugin丢失自研SCSS文件求助

先看你提供的截图：

结合你的loader配置，给出几个针对性的排查和修复方案：

1. 调整loader执行顺序 #

Webpack loader是从右到左、从下到上执行的，你的sass-resources-loader放在了sass-loader后面，这会导致资源注入在sass编译之后，完全起不到作用，还可能干扰编译结果。把它移到sass-loader前面：

{
  test: /\.scss$/i,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'resolve-url-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: require(path.join(process.cwd(), 'src/assets/css/scssUtils.js'))
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        additionalData (source, loaderContext) {
          if (loaderContext.resourcePath.endsWith('_library.scss')) {
            return source
          }
          return '@use \'~@/assets/css/_library\';'
        }
      }
    }
  ]
}

2. 完善sourceMap配置 #

Webpack 5中resolve-url-loader需要依赖上游loader的sourceMap才能正常工作，你已经给sass-loader开了sourceMap，还要给css-loader也加上：

{
  loader: 'css-loader',
  options: {
    sourceMap: true
  }
}

3. 检查@别名与~的解析 #

Webpack 5默认不再支持用~来解析node_modules或别名，如果你用@指代src目录，直接去掉~试试：

// 将原来的
return '@use \'~@/assets/css/_library\';'
// 改成
return '@use \'@/assets/css/_library\';'

同时确保你的resolve.alias里正确配置了@：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

4. 确认插件版本兼容性 #

Webpack 5需要搭配mini-css-extract-plugin v2.x及以上版本，检查你的package.json里的版本，低于v2的话直接升级：

npm install mini-css-extract-plugin@latest --save-dev

5. 排查additionalData的逻辑 #

如果你的_library.scss本身依赖了其他未被正确解析的文件，也可能导致整个自研SCSS编译异常。可以临时注释掉additionalData的逻辑，只保留基础的SCSS编译，看是否能正常提取内容，逐步排查问题点。

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