Стили React Ant Design не загружаются

Question

Я использую webpack 4x и пытаюсь включить antd вместе с babel-plugin-import.Я обновил свою конфигурацию веб-пакета для использования:

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

Это работает, так как в нем не выдается никаких ошибок.Тем не менее, стили, кажется, не отображаются в реальном приложении.Я включаю вот так:

import { Button } from 'antd'

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

Рендеринг кнопки просто отлично, это просто стили, которые не входят. Любая идея, если есть что-то еще, что нужно сделать, чтобы стили были на самом делевключено?Спасибо!

Answer 1

вам нужно импортировать файл меньшего размера из antd в меньшее:

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

, затем импортировать этот файл в индекс ts / js:

import './less/main.less';

вы также можете добавить тему файл конфигурации в main.less

Это конфигурация веб-пакета, которую я использую (webpack3):

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