Webpack4迁移样式导入后报resolve-url-loader CSS处理错误

为降低SSR编译耗时，我们将node_modules下样式文件的导入逻辑从JS文件迁移至CSS文件：移除.js文件中形如import 'react-multi-email/style.css';的导入语句，在.css文件中添加@import '~react-multi-email/style.css';完成替代。
完成上述修改后应用无法正常启动，控制台抛出如下报错：

ERROR in ./node_modules/font-awesome/css/font-awesome.min.css (./node_modules/css-loader??ref--5-oneOf-3-1!./node_modules/resolve-url-loader!./node_modules/font-awesome/css/font-awesome.min.css)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  a valid source-map is not present (ensure preceding loaders output a source-map)
  at file:/myRootPath/node_modules/font-awesome/css/font-awesome.min.css:4:41
    at encodeError (myRootApp/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (myRootApp/node_modules/resolve-url-loader/index.js:228:14)
 @ ./src/styles/app.scss (./node_modules/css-loader??ref--5-oneOf-3-1!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-3!./node_modules/sass-resources-loader/lib/loader.js??ref--5-oneOf-3-4!./src/styles/app.scss) 5:10-164
 @ ./src/styles/app.scss
 @ ./src/App.tsx
 @ ./src/MainApp.tsx
 @ ./src/index.js
 @ multi ./config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js

当前环境信息 #

Webpack样式loader配置 #

oneOf: [
  {
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          sourceMap: true,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          sourceMap: true,
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    use: [
      {
        loader: require.resolve('style-loader'),
        options: {
          sourceMap: true,
        },
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          sourceMap: true,
          debug: true,
        },
      },
      { loader: 'resolve-url-loader', options: { sourceMap: true, debug: true } },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [`${myPath}/app/src/styles/shared/*.scss`],
          sourceMap: true,
        },
      },
    ],
  },
],

依赖版本 #

"sass": "^1.52.1",
"sass-loader": "^10.1.1",
"sass-resources-loader": "^2.0.1",
"css-loader": "^0.28.7",
"postcss-loader": "^2.0.8",
"webpack": "^4.31.0",
"resolve-url-loader": "^4.0.0",
"style-loader": "^0.23.1",

已知约束 #

• 项目当前使用Webpack v4，暂无法完成全量依赖升级
• 现有配置中已为所有相关loader开启sourceMap选项

报错核心是resolve-url-loader拿不到有效source-map：

1. Webpack loader执行顺序为从下到上、从右到左，SCSS规则中resolve-url-loader的作用是处理业务scss文件中的相对路径资源，依赖前置loader输出的source-map定位资源位置。
2. 迁移样式导入时，若误将第三方CSS（如font-awesome.min.css）的@import语句写在SCSS文件中，css-loader会直接将这类预压缩的第三方CSS拉入当前SCSS的loader链处理。这类min版本的第三方CSS默认会移除source-map相关注释，也不需要做路径重解析，经过resolve-url-loader时就会触发无有效source-map的报错。
3. 现有配置没有给resolve-url-loader设置资源过滤规则，无差别处理所有经过的CSS，包括不需要处理的node_modules下第三方资源。

方案1：最小改动，给resolve-url-loader添加过滤规则 #

修改SCSS规则中resolve-url-loader的配置，跳过node_modules下的第三方资源，这类资源都是预构建完成的，不需要做url路径解析：

{
  loader: 'resolve-url-loader',
  options: {
    sourceMap: true,
    debug: true,
    // 过滤node_modules下的资源，不做url解析处理
    filter: (resourcePath) => {
      return !resourcePath.includes('node_modules');
    }
  }
}

修改后重启开发服务即可，原有SSR编译优化逻辑不受影响。

方案2：调整第三方样式导入位置 #

检查所有样式导入语句，确保node_modules下第三方CSS的@import语句全部写在.css文件中，走CSS对应的loader链（该链无resolve-url-loader，不会触发source-map校验），不要在.scss文件中直接@import第三方普通CSS文件。

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