使用Webpack集成swagger-ui-react时加载样式报错求助

问题原因 #

该错误是由于swagger-ui-react包中的swagger-ui.css文件附带的source map格式不规范，导致postcss-loader在解析时无法处理无效的映射信息，抛出original.line and original.column are not numbers错误。

解决方案 #

方案1：区分处理项目内与第三方库的CSS #

修改webpack.config.js中的CSS规则，让postcss-loader只处理你项目内的CSS文件，跳过node_modules中的第三方CSS：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: { loader: "ts-loader" },
      },
      // 处理项目自身的CSS，使用postcss-loader
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      // 处理node_modules中的CSS，跳过postcss-loader
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  // ...其他配置
};

方案2：关闭postcss-loader的source map功能 #

如果不需要对CSS生成source map，可以直接关闭postcss-loader的source map相关配置，避免解析无效的映射：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: { loader: "ts-loader" },
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              sourceMap: false,
              postcssOptions: {
                map: false,
              },
            },
          },
        ],
      },
    ],
  },
  // ...其他配置
};

方案3：升级postcss-loader版本 #

尝试将postcss-loader升级到最新版本，新版本可能修复了这类source map兼容性问题：

yarn add postcss-loader@latest --dev

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