Ant Design components style not loading correctly - reactjs

Question

Recently I decided to build my own setup for react & webpack
So I faced some problems with UI libraries like antd or Bulma when import component like button the style of it doesn't work
this is my 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'));
and this is my output
(I uploaded the image on imgur because I'm not allowed to upload images on StackOverflow until I got 10 reputations)
this is my webpack setting code
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

I ran into a similar issue, here's how I managed to solve it;
Replace your webpack rule for less files with this:
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader", options: { javascriptEnabled: true } }
]
}
NB: You should have style-loader, css-loader and less-loader installed.
Import antd.less instead of antd.css
In your index.js file, use import "antd/dist/antd.less" instead of import "antd/dist/antd.css" ensure you have less installed too.
Hope this helps!!