Question

我正在使用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>
  }
}

它使按钮很好，只是不使用样式。是否还需要做一些其他事情以便实际包含样式，您知道吗？谢谢！

Answer 1

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

  onSubmit = async (e) => {
    e.preventDefault();

    const accounts = await web3.eth.getAccounts();

    this.setState({ message: 'Waiting on transaction...' })
    try{
      await lottery.methods.enter().send({
        from: accounts[0],
        value: web3.utils.toWei(this.state.value, 'ether')
      });
    } catch (err) {
      console.log("ERR!", err)
    }
    this.setState({ message: 'Success!' })
  }

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

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

您还可以在main.less中添加主题config file

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

import './less/main.less';

Answer 2

找到了另一个解决方案here：

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

React Ant设计样式未加载

2 个答案: