less-loader无法识别antd.less样式

[snowrain0722]

package.json内容
{ "name": "web5", "version": "1.0.0", "description": "开发与生产分离配置", "main": "index.js", "scripts": { "test": "jest", "start": "webpack serve --config webpack.dev.js", "build": "webpack --config webpack.prod.js" }, "author": "snowrain", "license": "ISC", "dependencies": { "antd": "^4.9.4", "axios": "^0.21.1", "lodash": "^4.17.20", "mockjs": "^1.1.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.12.10", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.2", "babel-plugin-import": "^1.13.3", "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.0.1", "css-minimizer-webpack-plugin": "^1.1.5", "eslint": "^7.16.0", "eslint-plugin-react": "^7.21.5", "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "jest": "^26.6.3", "less": "^4.0.0", "less-loader": "^7.2.1", "mini-css-extract-plugin": "^1.3.3", "node-sass": "^5.0.0", "redux-devtools": "^3.7.0", "sass": "^1.30.0", "sass-loader": "^10.1.0", "svg-inline-loader": "^0.8.2", "url-loader": "^4.1.1", "webpack": "^5.11.1", "webpack-cli": "^4.3.0", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.7.3" } }
webpack.config.js解析配置：
`const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
entry: { index: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-bundle.js'
},
resolve: {
extensions: [".js", ".jsx", ".json"],
alias: {
"~": path.join(__dirname, "./src") // 配置项目根路径模块引用方法。
}
},
module: {
rules: [
{
test: /.(sc|sa|c|le)ss$/,
include: /(node_modules|bowser_components)/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}]
},
{
test: /.css$/,
exclude: /(node_modules|bowser_components)/,
use: [MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
{
test: /.s(a|c)ss$/,
exclude: /(node_modules|bowser_components)/,
use: [MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true
}
}, 'sass-loader']
},
{
test: /.less$/,
exclude: /(node_modules|bowser_components)/,
use: [MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true
}
}, {
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}]
},
{
test: /.(jpg|png|gif|ico)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[chunkhash:8].[ext]',
outputPath: '/images',
limit: 204800
}
}
},
{
test: /.svg$/,
loader: 'svg-inline-loader'
},
{
test: /.(js|jsx)$/,
exclude: /(node_modules|bowser_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + '/index.tmpl.html',
hash: true,
title: 'Redux-App',
chunks: { index: './src/index.js' },
favicon: './src/images/favicon.ico'
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].[chunk:3].css',
chunkFilename: "[id].css"
})
]
}.babelrc配置：{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}现解析报错：ERROR in ./src/styles/global.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

.@{autocomplete-prefix-cls} {
.reset-component;
^
Unrecognized input. Possibly missing '(' in mixin call.
Error in D:\上传专用\练习\webpack搭建\React\web5\node_modules\antd\lib\auto-complete\style\index.less (line 10, column 18)
at processResult (D:\上传专用\练习\webpack搭建\React\web5\node_modules\webpack\lib\NormalModule.js:583:19)
at D:\上传专用\练习\webpack搭建\React\web5\node_modules\webpack\lib\NormalModule.js:676:5
at D:\上传专用\练习\webpack搭建\React\web5\node_modules\loader-runner\lib\LoaderRunner.js:397:11
at D:\上传专用\练习\webpack搭建\React\web5\node_modules\loader-runner\lib\LoaderRunner.js:252:18
at context.callback (D:\上传专用\练习\webpack搭建\React\web5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.lessLoader (D:\上传专用\练习\webpack搭建\React\web5\node_modules\less-loader\dist\index.js:57:5)
@ ./src/index.js 5:0-41 10:13-18

1 ERROR in child compilations
webpack 5.11.1 compiled with 2 errors in 20577 ms
i ｢wdm｣: Failed to compile.src自行引入代码如下： index.jsimport React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './containers/Store';
import './styles/global.less';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);global.less:@import 'antd/lib/style/themes/default.less';
@import 'antd/dist/antd.less';`
实在是不知道哪里出问题了，有懂的人帮忙解决一下吗？

[yoyo837]

less 用的4？改为3.x

[snowrain0722]

谢谢，可以了。