Cfrgtkky

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

        })

    ]

};