3

I am trying to use @ant-design/pro-layout in a create-react-app typescript project.

I cannot get the styles of @ant-design/pro-layout to work. The components load well, but the LESS does not.

Is there anything to do in particular other than following the tutorial use with create-react-app?

Greg Forel
  • 2,199
  • 6
  • 25
  • 46

1 Answers1

0

I faced the same problem. From what i understood as I am a newbie in React, create-react-app does not compile less although it does so for sass and scss.

So you have 2( +1) options as stated in antd documentation.

  1. Install craco package to handle .less files as in here OR
  2. Eject. (An answer to what is eject is answered here). After injecting you can choose less-loader and modify webpack.config.js. In webpack.config.js you must add:

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

dont forget the javascriptEnabled: true.

  1. I found another way without ejecting ( i haven't tested it ).

Personally i ejected and configured manually webpack.

Nikolaos Pappas
  • 3
  • 1