React Ant Design 样式未加载答案

【问题标题】：React Ant Design styles not loadingReact Ant Design 样式未加载
【发布时间】：2019-03-09 02:32:21
【问题描述】：

我正在使用 webpack 4x 并尝试包含 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>
  }
}

它可以很好地呈现按钮，只是样式没有进来。知道是否需要做其他事情才能真正包含样式吗？谢谢！

【问题讨论】：

标签： reactjs antd

【解决方案1】：

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

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

然后在 ts/js 索引中导入这个文件：

import './less/main.less';

你也可以在main.less中添加主题config file

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

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

【讨论】：

嗯，这样会加载那些基本样式，但似乎仍然没有从 Button 加载组件样式。
实际上看起来像在 less-loader 之前添加 style-loader 和 css-loader 就可以了。
我添加了我使用的 webpack 配置。

【解决方案2】：

找到另一个解决方案here：

在您的 index.js 文件中，您可以导入 ant 样式文件：导入“antd/dist/antd.css”；参考：https://ant.design/docs/react/getting-started

【讨论】：