react项目中引入antd,报错

Question

在项目中使用


按照蚂蚁官网的方式引入配置，webpack的配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'inline-source-map',
    /*入口*/
    entry: {
        app:[
            "@babel/polyfill",
            path.join(__dirname, '../src/index.js')
        ],
        vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
    },
    mode:'development',
    /*输出到dist文件夹，输出文件名字为bundle.js*/
    output: {
        publicPath:'/',
        path: path.join(__dirname, '../dist'),
        filename: '[name].[hash].js',
        chunkFilename: '[name].[chunkhash].js'
    },
    // webpack-dev-server
    devServer: {
        // contentBase: path.join(__dirname, '../dist'),
        compress: true,  // gzip压缩
        host: '0.0.0.0', // 允许ip访问
        hot:true, // 热更新
        historyApiFallback:true, // 解决启动后刷新404
        port: 8000 // 端口
    },
    /*src文件夹下面的以.js结尾的文件，要使用babel解析*/
    /*cacheDirectory是用来缓存编译结果，下次编译加速*/
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory=true'],
        },{
            test: /\.css$/,
            use: ["style-loader", {
                loader:'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]--[hash:base64:5]'
                }
            }, 'postcss-loader']
         }, {
            test: /\.less$/,
            loader: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        },{
             test: /\.(png|jpg|gif)$/,
             use: [{
                 loader: 'url-loader',
                 options: {
                     limit: 8192
                 }
             }]
         }]
    },
    // 别名配置
    resolve: {
        alias: {
            pages: path.join(__dirname, '../src/pages'),
            components: path.join(__dirname, '../src/components'),
            router: path.join(__dirname, '../src/router'),
            images: path.join(__dirname, '../src/images'),
            actions: path.join(__dirname, '../src/redux/actions'),
            reducers: path.join(__dirname, '../src/redux/reducers')
        },
        mainFiles: ['index'],
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, '../public/index.html')
        })
    ]
};

package.json如下

{
  "name": "react-test",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "homepage": ".",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.config.js"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-import": "^1.13.3",
    "clean-webpack-plugin": "^2.0.1",
    "core-js": "2.6.5",
    "cross-env": "^7.0.3",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "mini-css-extract-plugin": "^0.5.0",
    "mockjs": "^1.0.1-beta3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "antd": "^4.16.6",
    "axios": "^0.18.0",
    "history": "^4.6.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "qrcode.react": "^1.0.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-fastclick": "^3.0.2",
    "react-loadable": "^5.5.0",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-router-redux": "^4.0.8",
    "redux": "^4.0.1",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0"
  }
}

babel的配置如下，这个是按需加载antd的

const babelConfig = {
    presets: [["@babel/preset-env",{
        useBuiltIns: "entry",
        corejs: 2
    }], "@babel/preset-react"],
    plugins: [
        ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }],
        "@babel/plugin-syntax-dynamic-import",
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties'
    ],
    ignore: ['node_modules', 'build'],
}

module.exports = babelConfig;

项目结构如下

在网上也搜索了很多东西，但是还是不行，不知道是不是less的版本问题

Answer 1

你改下babel.config.js文件，设置"style": true

const babelConfig = {
    presets: [["@babel/preset-env",{
        useBuiltIns: "entry",
        corejs: 2
    }], "@babel/preset-react"],
    plugins: [
        ["import", { 
        "libraryName": "antd", "libraryDirectory": "lib", "style": true }],
        "@babel/plugin-syntax-dynamic-import",
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties'
    ],
    ignore: ['node_modules', 'build'],
}

module.exports = babelConfig;