这是我收到的错误:
Uncaught Error: Module parse failed: Unexpected token (15:5)
You may need an appropriate loader to handle this file type.
| /* stylelint-disable at-rule-no-unknown */
| html,
> body {
| width: 100%;
| height: 100%;
at eval (antd.css:1)
at Object../node_modules/antd/dist/antd.css (index.js:228)
at __webpack_require__ (index.js:20)
at eval (App.js:10)
at Module../KQShopping/frontend/src/App.js (index.js:97)
at __webpack_require__ (index.js:20)
at eval (index.js:2)
at Module../KQShopping/frontend/src/index.js (index.js:109)
at __webpack_require__ (index.js:20)
at index.js:84
webpack 配置文件:
const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './ant-theme-vars.less'), 'utf8'));
module.exports = {
module: {
rules: [
{
loader: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
options: {
plugins: [
['import', { libraryName: "antd", style: true }]
]
},
},
{
test: /\.less$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"},
{loader: "less-loader",
options: {
modifyVars: themeVariables
}
}
]
}
]
}
};
应用程序.js:
import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, message } from "antd";
import "antd/dist/antd.css";
class App extends React.Component {
state = {
date: null,
};
handleChange = date => {
message.info(`Selected Date: ${date ? date.format("YYYY-MM-DD") : "None"}`);
this.setState({ date });
};
render() {
const { date } = this.state;
return (
<div style={{ width: 400, margin: "100px auto" }}>
<DatePicker onChange={this.handleChange} />
<div style={{ marginTop: 20 }}>
Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
Babel 配置文件:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-class-properties", ["import", { "libraryName": "antd", "style": "true" }]]
}
我遵循了多个教程和操作方法,但每次都会出错,而且我不知道如何修复这个错误,因为我刚刚开始学习 babel 和 webpack,经验很少。
在这个问题中,我完全遵循了这个文档 https://ant.design/docs/react/getting-started但我仍然遇到错误
最佳答案
最后,我使用了 CSS,在 webpack 配置文件中添加了以下内容:
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
关于reactjs - 使用 React 和 Webpack 配置 antd,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55060911/