加载样式出错，webpack + swagger-ui

Question

我在尝试运行使用

swagger-ui-react

组件的非常简单的应用程序时遇到错误。当加载程序尝试从

swagger-ui-react/swagger-ui.css

.

加载样式时出现问题

这是我的设置（你可以在这里找到一个 repo 来解决问题）：

Index.tsx:

import ReactDOM from "react-dom/client";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(<SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />);

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  entry: path.resolve(__dirname, "./src/index"),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: { loader: "ts-loader" },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: ["./node_modules"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
};

package.json:

{
  "name": "webpack-swagger-ui",
  "version": "1.0.0",
  "main": "index.tsx",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@types/swagger-ui-react": "^4.18.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^7.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.2",
    "swagger-ui-react": "^4.18.2",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.3",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

当我做

yarn start

我得到一个错误：

ERROR in ./node_modules/swagger-ui-react/swagger-ui.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swagger-ui-react/swagger-ui.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.

任何人都可以指出我在哪里寻找解决方案吗？

Answer 1

我想通了！

原来我需要安装和使用

postcss-url

插件来解决这个问题。配置中的此更改修复了它：

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: ['postcss-url']
    }
  }
}