antd-mobile 按需加载报错怎么解决?

Question

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 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

Answer 1

问题已经解决.问题出在webpack 配置中:

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

删除掉 exclude 就可以了