create-react-app搭配react16+ts+less

腳手架默認不支持less
create-react-app創建ts類型的react項目

// 全局安裝腳手架工具
npm install -g create-react-app

// 使用腳手架創建react項目
npx create-react-app demo --template typescript

 

項目中，你寫less，並引入tsx中，如下

import React from 'react';
import style from './style.less';

const Login = () => {
  return (
    <div className={style.Login}>登錄</div>
  );
}

export default Login;

.Login {
  color: red;
}

 

添加less的全局類型聲明，編譯階段不報錯

你會發現🎈，導入less時如果被提示找不到模塊xxx.less,需要在項目的根路徑文件react-app-env.d.ts（理論上，只要定義全局類型聲明就行，非本文件也行）中，添加一下內容

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

如果是jsx，即非ts的react項目，忽略此步驟

 

安裝webpack對應的less支持
安裝對應的包

npm install less less-loader --save-dev

配置webpack對less支持
運行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'
              ),
            },

 

其它
如果有類似下邊的報錯：

Failed to compile.

./src/pages/home/style.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/pages/home/style.less) TypeError: this.getOptions is not a function

那是因為less-loader的版本太高了，降級即可：yarn add --dev less-loader@5.0.0
建議less版本也鎖定在 3.10.3