标签：ffffff react col 配置 etl 步骤 code any creat
脚手架默认不支持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
标签：ffffff react col 配置 etl 步骤 code any creat
原文地址：https://www.cnblogs.com/dshvv/p/12305882.html
