React Ant Design styles not loading

Question

I'm using webpack 4x and trying to include antd along with babel-plugin-import. I've updated my webpack config to use:

    {
      test: /\.less$/,
      include: [/[\\/]node_modules[\\/].*antd/],
      use: [
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true
          }
        }
      ]
    },

This works, as in it doesn't throw any errors. However, the styles don't seem to be showing up in the actual app. I'm including like this:

import { Button } from 'antd'

class App extends Component {
  render() {
    return <Button type="primary">Button</Button>
  }
}

It's rendering the button just fine, it's just the styles that aren't coming in. Any idea if there's something else that needs to be done so the styles are actually included? Thank you!

Answer 1

you need to import the less file of antd in less :

//main.less
@import "~antd/dist/antd.less";

then import this file in ts/js index:

import './less/main.less';

you can also add the theme config file in main.less

This is the webpack config I use (webpack3):

,{
                test: /\.less$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'theme.css'
                    }
                },{
                    loader: 'less-loader',
                    options: { javascriptEnabled: true }// compiles Less to CSS
                }]
          },