Recently, I was interested in learning typescipt, React and Ant. Unfortunately, I was able to put together a complete solution, but the process was not smooth. Now I record my solution process for your reference

Release notes
  1. Create-react-app version 4.0.0 (October 31, 2020) create-React-app version 4.0.0 (October 31, 2020)
  2. Ant Design of React Version 4.7.3
  3. Less Version: 3.12.2
  4. Less-loader version: 7.0.2
  5. Node version: 12.13.0
  6. NPM version: 6.12.0

1. Use create-React-app scaffolding installation projects

I used to use NPM to install, like YARN should also be able to pass (the default is YARN)

npx create-react-app antd-demo-ts --typescript --use-npm
Copy the code

Expose all built-in configurations

This step is critical, and if you don’t do it the first time, you may fail

npm run eject 
Copy the code

Directory structure after exposure

3. Modify the path mapping

Add “@”: path.resolve(” SRC “) to webpack.config.js alias to index SRC files

"@": path.resolve("src")
Copy the code

PS: With typescript you also need to add path mapping to tsconfig.json in the root directory

// tsconfig.json
"compilerOptions": {
  "baseUrl": "."."paths": {
    "@ / *": ["./src/*"]}}Copy the code

Screenshots:

4. Introduce Ant

Now install and import ANTD from YARN or NPM.

npm i antd --save
Copy the code

The ant – desgin @ import ‘~ antd/dist/antd CSS’; Also, only CSS can use import styles

5. Import less and less-loader and modify configurations

npm i less less-loader --save-dev
Copy the code

Add constants to webpack.config.js after installation:

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
Copy the code

Screenshots:

Add the following code between cssModuleRegex and sassModuleRegex:

// Compile the less file
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2.sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    "less-loader"
  ),
  sideEffects: true}, {test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2.sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    "less-loader"),},Copy the code

Screenshots:

Then modify the getStyleLoaders function to rewrite if (preProcessor) :

if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: true,}};if (preProcessor === "less-loader") {
    loader.options.lessOptions = {
      javascriptEnabled: true}; } loaders.push( {loader: require.resolve("resolve-url-loader"),
      options: {
        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        root: paths.appSrc,
      },
    },
    loader
  );
}
Copy the code

Screenshots:

Since the less configuration takes effect, let’s try it out

Modify SRC/app.js and rename app.css app.less to introduce antD button components.

import React, { FC } from "react";
import { Button } from "antd";
import "@/App.less";

const App: FC = () = > (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;
Copy the code

Change SRC/app. less to antd/dist/antd.less at the top of the file.

@import "~antd/dist/antd.less";
Copy the code

! Run NPM run start to see the effect

Modify SRC/app.less again to introduce the official theme and see what happens

@import "~antd/dist/antd.dark.less"; // Introduce the officially provided dark less style entry file
@import "~antd/dist/antd.compact.less"; // Introduce the compact less-style entry file provided by the official
Copy the code

! Run NPM run start to see the effect