react支持ts+ less配置

1. 全局安装脚手架工具
   npm install -g create-react-app

2. 使用脚手架创建react项目
   npx create-react-app demo --template typescript

3. 安装less
   npm install less less-loader --save-dev

4. 添加less的全局类型声明(在react-app-env.d.ts中添加以下内容)

declare module "*.less" {
  const less: any;
  export default less;
}

5. 配置webpack对less支持
   运行npm run eject暴漏webpack的配置文件config/webpack.config.js
   注意：在react项目中暴露webpack配置文件，命令行即：yarn eject 或 npm run eject

结果报了一个以前没有出现过的错误：Remove untracked files, stash or commit any changes, and try again.

运行npm run eject需要没有更新代码，我们提交一次代码就行了，输入下面命令行就行了:
git add .

git commit -m "Save before ejecting"

npm run eject

6. 运行npm run eject暴漏webpack的配置文件config/webpack.config.js
   在第73行左右(主要找到配置sass和css的位置)配置如下：
   //添加如下支持less配置代码

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

在第508行左右添加如下代码：

 {
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 2,
       // modules: true, 如果仅打开cssModule  那么原类名 将会没有前缀，无法与自己的样式类名关联，所以下边做法可取
       sourceMap: isEnvProduction
       ? shouldUseSourceMap
       : isEnvDevelopment,
       modules: {
         mode: 'icss',
       },
     },
     'less-loader'
   ),
   sideEffects: true,
 },

 {
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 2,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         mode: 'local',
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'less-loader'
   ),

 },