1. Create the React project and select typescript as required

npx create-react-app demo --template typescript
Copy the code

2. Use less

1. Expose webPack configuration

yarn eject
Copy the code

2. Modify the webpack.config.js file and add the following code where appropriate

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

module.exports = function (webpackEnv) {
    return {
        module: {
            rules: [
                {
                    oneOf:[
                        {
                          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

3. Restart the SYSTEM and check whether less takes effect

TypeError: this. GetOptions is not a function

Cause: Less-Laoder installed version was too high, so it was changed from 10.*.* to 5.0.0…

Error: Cannot find module ‘./ app.less ‘

Reason: Non-code resources are not recognized in TypScript, so you need to declare the Module proactively. D.ts files are automatically read during project compilation, so there is no need to manually load them. Of course. D. ts files can’t be placed in a project. These files need typescript compilation just like TS files, so they should be placed in the same folder as the include property in tsconfig.json.

Create global.d.ts file under SRC:

declare module '*.less'
Copy the code

3. Introduce the Antd

yarn add antd
yarn add -D babel-plugin-import
Copy the code

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

@import '~antd/dist/antd.css';
Copy the code

The antD style file should be used in the app.tsx file to introduce ANTD style file:

import 'antd/dist/antd.css'
Copy the code

If it still works, it may be because the downloaded ANTD file is in our node_modules folder, local CSS styles are not enabled in antD (node_modules) directory, and local CSS styles are enabled in non-ANTD (non-node_modules) directory.

4. Alias the folder and replace the relative path with the absolute path

// const path = require('path') module.exports = {resolve: {// resolve: js, json extensions: ['. Js', 'JSX', 'json'], alias: {/ / alias' @ ': path. Join (__dirname,'. / SRC)}}}Copy the code

5. Use the SVG icon as the React component

Reference article:

How to use SVG ICONS as React components?

How to use SVG Icons as React Components

How to pass props to components in React

TypeScript × @ant-design/ ICONS dynamic loading and type hints

With antd custom svg icons, how to pass props down to svg?