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

Posted 2021-03-10 甲乙丙丁少

脚手架默认不支持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;
}

如果是tsx，即非ts的react项目，忽略此步骤

 

安装webpack对应的less支持
安装对应的包

npm install 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‘
              ),
            },