Ant Design组件样式无法正确加载

Question

最近，我决定为React＆Webpack构建自己的设置 因此，当按钮之类的导入组件无法使用时，我遇到了 antd 或布尔玛等UI库问题

这是我的index.js

import React from 'react';
import ReactDom from 'react-dom';
import 'antd/dist/antd.css';
import { Button } from 'antd';
import './index.css';

const Index = () => (
     <div>
         <Button type="primary">Primary</Button>
     </div>
  )
;

ReactDom.render(<Index/>,document.getElementById('root'));

这是我的输出

（我将图片上传到了imgur上，因为直到获得10个信誉之前，我才允许将图片上传到StackOverflow）

这是我的webpack设置代码

const path= require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    entry:path.resolve(__dirname,'src/index.js'),
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
    },


    module: {
        rules: [
            {
                test:/\.js$/,
                use:"babel-loader",
                exclude:/node_modules/,
            },

            {
                test:/\.(css|scss)$/,
                use:[
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            camelCase: true,
                            localIdentName: '[local]___[hash:base64:5]',
                        },
                    },
                    'sass-loader',
                ]
            },

            {
                test:/\.less/,
                use:[
                    "less-loader",
                ]
            },

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                            disable: true
                        }
                    }
                ]
            },

            {
                test:/\.(jpg|png|gif)$/i,
                exclude:/node_modules/,
                use:{
                    loader: "url-loader",
                    options:{
                        limit:8000
                    }
                }

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'src/index.html')
        })
    ]
};

Answer 1

我遇到了类似的问题，这是我设法解决的方法；

用以下内容替换您的Webpack规则以减少文件数量：

{ test: /\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { javascriptEnabled: true } } ] } 注意：您应该安装了style-loader，css-loader和less-loader。

导入antd.less而不是antd.css

在index.js文件中，使用import "antd/dist/antd.less"代替import "antd/dist/antd.css"，以确保安装量也减少了。

希望这会有所帮助！