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

Posted 2023-03-07

【中文标题】无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用

【英文标题】：Cannot get the styles of @ant-design/pro-layout to work with `create-react-app`

【发布时间】：2019-12-09 07:44:00

【问题描述】：

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

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

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

【参考方案1】：

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

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

安装craco 包以处理here 中的.less 文件或 弹出。 （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。

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

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