无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用

Question

我正在尝试在 create-react-app typescript 项目中使用 @ant-design/pro-layout。

我无法让@ant-design/pro-layout 的样式起作用。组件加载良好，但 LESS 加载不好。

除了按照教程use with create-react-app之外，还有什么特别要做的吗？

Answer 1

我遇到了同样的问题。 据我了解，我是 React 的新手，create-react-app 不会编译更少，尽管它对 sass 和 scss 这样做。

所以您有 2(+1) 个选项，如 antd documentation 所述。

1. 安装craco 包以处理here 中的.less 文件或
2. 弹出。 （eject 的答案是here）。注入后可以选择less-loader，修改webpack.config.js。在 webpack.config.js 中你必须添加：

{
  test: /\.less$/,
  use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
    {
      loader: "less-loader",
      options: {
        lessOptions: {
          javascriptEnabled: true,
        }
      }
    }
  ]
},

不要忘记javascriptEnabled: true。

1. 我找到了another way without ejecting（我还没有测试过）。

我个人手动弹出并配置了 webpack。