reactjs - Ant Design 组件样式未正确加载

问题描述

最近我决定为 react 和 webpack 构建自己的设置所以当导入像按钮这样的组件时，我遇到了一些 UI 库（如antd或Bulma ）的问题，它的样式不起作用

这是我的 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')
        })
    ]
};

标签： reactjswebpackantd

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

将您的 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"确保您也安装了 less。

希望这可以帮助！！

reactjs - Ant Design 组件样式未正确加载

问题描述

解决方案

推荐阅读