Integrate the latest version of create-react-app, typescript, ant-design, less, less-loader and path mapping method

Recently, because of interest, I want to learn types cipt, react, and ant. By coincidence, I can make up a complete set of solutions. Unfortunately, the process is not smooth. Now record my solution process for your reference. I hope I can run through it smoothly.

Imprint

create-react-app version number: 4.0.0 (October 31, 2020, internal react, typescript, etc.)
Ant Design of React version number: 4.7.3
less version number: 3.12.2
less-loader version number: 7.0.2
Node version number: 12.13.
npm version number: 6.12.0

1. Use create-react-app scaffolding to install the project

I am accustomed to using npm to install, and I like yarn should also work (the default is yarn)

npx create-react-app antd-demo-ts --typescript --use-npm

2. Expose all built-in configurations

This step is very critical. If you don’t perform this step for the first time, you may make a mistake

npm run eject

Directory structure after exposure
Insert picture description here

Three, modify the path mapping

Increase in webpack.config.js of Alias "@": path.resolve("src"), can later be used @for srcfile of documents indexed friends ~

"@": path.resolve("src")

Screenshot:

Insert picture description here

Fourth, introduce ant

Now install and import antd from yarn or npm.

npm i antd --save

At present, ant-desgin @import '~antd/dist/antd.css';can only use css to use imported styles

Five, introduce less, less-loader and modify the configuration

npm i less less-loader --save-dev

After the installation is complete, add constants in webpack.config.js:

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

Screenshot:
Insert picture description here

In yet cssModuleRegexand sassModuleRegexadd the following code between:

// 编译less文件
{
    
    
  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: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    "less-loader"
  ),
},

Screenshot:
Insert picture description here

Then modify the getStyleLoadersfunction to if (preProcessor)rewrite:

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
  );
}

Screenshot:
Insert picture description here

Since the less configuration takes effect, let's try it

Modified src/App.jsand App.cssrenamed App.lessto introduce the button component of antd.

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;

Modifications are src/App.lessintroduced at the top of the file antd/dist/antd.less.

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

! Run to npm run startsee the effect

Modify again src/App.less, introduce the official theme and see the effect

@import "~antd/dist/antd.dark.less"; // 引入官方提供的暗色 less 样式入口文件
@import "~antd/dist/antd.compact.less"; // 引入官方提供的紧凑 less 样式入口文件

! Run to npm run startsee the effect

Insert picture description here