create-react-app +ts+less(新手上路，多多指教)

1.全局安装脚手架工具

npm install -g create-react-app

2.使用脚手架创建react项目

npx create-react-app demo --template typescript

3.安装less

npm install 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.

是git地址的问题，输入下面命令行就行了:

git add .

git commit -am "Save before ejecting"

npm run eject

6.运行npm run eject暴漏webpack的配置文件config/webpack.config.js

在第50行左右配置如下：

//添加如下支持less配置代码

const lessRegex = /\.less$/;

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

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

{

  test: lessRegex,

  exclude: lessModuleRegex,

  use: getStyleLoaders(

    {
      importLoaders: 2,
      // modules: true, 如果仅打开cssModule  那么原类名 将会没有前缀，无法与自己的样式类名关联，所以下边做法可取
      modules:{
        localIdentName: '[local]_[hash:base64:5]',
      },
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),

  sideEffects: true,

  },

  {

    test: lessModuleRegex,

    use: getStyleLoaders(

      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      'less-loader'
   ),

},