React Ant设计样式未加载

Question

我使用的WebPack 4倍,并试图包括antd沿babel-plugin-import.我已经更新了我的webpack配置使用:

    {
      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

您需要在less中导入更少的antd文件：

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

然后将此文件导入ts / js索引中：

import './less/main.less';

您还可以在main.less中添加主题配置文件

这是我使用的webpack配置（webpack3）：

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