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

登山则情满于山，观海则意溢于海。这篇文章主要讲述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; }

如果是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‘ ), },

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