加载样式错误，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']
}
}
}