How to solve the error report of antd-mobile on-demand loading?

package.json  antd-mobile, babel-plugin-import
"dependencies": {
    "antd-mobile": "^2.1.11",
    "autoprefixer": "^8.6.2",
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "postcss-flexbugs-fixes": "^3.3.1",
    "postcss-loader": "^2.1.5",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2"
  }
--------------------
webpack.js
module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env", "react"],
                    plugins: [
                        ["import", {
                            "libraryName": "antd-mobile",
                            "style": "css",   // or "css"
                        }]
                    ]
                },
            },
        },
        {
            test: [/\.jpe?g$/, /\.gif$/, /\.png$/, /\.bmp$/, /\.ico$/, /\.svg$/],
            exclude: /node_modules/,
            loader: require.resolve("url-loader"),
            options: {
                limit: 10000,
                name: "dist/assets/[name].[hash:8].[ext]",
            },
        },
        {
            test: [/\.css$/, /\.scss$/],
            exclude: /node_modules/,
            use: [
                require.resolve("style-loader"),
                {
                    loader: require.resolve("css-loader"),
                    options: {
                        importLoaders: 1,
                    },
                },
                {
                    loader: require.resolve("postcss-loader"),
                    options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: "postcss",
                        plugins: () => [
                            require("postcss-flexbugs-fixes"),
                            autoprefixer({
                                browsers: [
                                    ">1%",
                                    "last 4 versions",
                                    "Firefox ESR",
                                    "not ie < 9", // React doesn"t support IE8 anyway
                                ],
                                flexbox: "no-2009",
                            }),
                        ],
                    },
                },
            ],
        },
    ]
},

App.js

import React, { Component } from "react";
import {
    Link
} from "react-router-dom"

import {Button} from "antd-mobile"

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello World!!!!!!</h1>
                <Button>Button</Button>
            </div>
        );
    }
}

export default App;

error

ERROR in ./node_modules/antd-mobile/lib/button/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/mixins";
| @import "../../style/themes/default";
| @buttonPrefixCls: am-button;
 @ ./node_modules/antd-mobile/lib/button/style/index.js 7:0-23
 @ ./src/containers/App.js
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./node_modules/antd-mobile/lib/icon/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/themes/default";
| @import "../../style/mixins";
|
 @ ./node_modules/antd-mobile/lib/icon/style/index.js 3:0-23
 @ ./node_modules/antd-mobile/lib/button/style/index.js
 @ ./src/containers/App.js
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./node_modules/antd-mobile/lib/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "./themes/default";
| @import "./mixins";
| @import "./anim";
 @ ./node_modules/antd-mobile/lib/style/index.js 5:0-23
 @ ./node_modules/antd-mobile/lib/button/style/index.js
 @ ./src/containers/App.js
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./node_modules/normalize.css/normalize.css 12:5
Module parse failed: Unexpected token (12:5)
You may need an appropriate loader to handle this file type.
|  */
|
> html {
|   line-height: 1.15; /* 1 */
|   -ms-text-size-adjust: 100%; /* 2 */
 @ ./node_modules/antd-mobile/lib/style/index.js 3:0-38
 @ ./node_modules/antd-mobile/lib/button/style/index.js
 @ ./src/containers/App.js
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
Mar.19,2021

the problem has been solved. The problem lies in the webpack configuration:

test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,

just delete exclude

Menu