CODEWITHSUNDEEP
reactjsantd
dzm
dzm

Reputation: 23534

React Ant Design styles not loading

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!

Upvotes: 15

Views: 12112

Answers (2)

Aliaksei Litsvin
Aliaksei Litsvin

Reputation: 1261

Found another solution here:

In your index.js file, you can import ant style files: import 'antd/dist/antd.css'; Reference: https://ant.design/docs/react/getting-started

Upvotes: 0

C Taque
C Taque

Reputation: 1097

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
                }]
          },

Upvotes: 11

Related Questions