The React Typescipt project uses less for modularization

To create a typescript project, run the NPX create-react-app my-app –template typescript command

2. Run the NPM run eject command in the created project to extract the Webpack configuration

3, my – app/config/webpack config. Js in webpack. Config. Js modify add less relevant configuration

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

2. Add the less-loader configuration to import {test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({importLoaders: 1, modules: true, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader'), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader'), },Copy the code

The configuration of less-loader is basically the same as that of SASS

4. Run the NPM install less less-loader –save-dev command to add less and less-loader

Complete the configuration and restart the project. The project can already use less normally, but the import of less files must use require. Const styles = require(‘… Path /xx.less’), if you want to import less files using import mode, you also need to perform the following configuration

5,

1. Create the externals.d.ts file (the location of the file is determined by yourself) as follows: Declare module '*.less' 2. Locate the tsconfig.json file in your project and include the externals.d.ts file you just created. For example,Copy the code

Complete the configuration and restart the project. You can import less files in TS.