在看一个 react 项目的时候，项目中是直接引入 import style from './style.less'
create-react-app 创建项目之后， react 脚手架里面是已经集成了css，sass的，先安装less，less-loader
npm install less less-loader
react 默认隐藏 webpack 配置文件。有个方法是 npm run eject 将 webpack 配置暴露出来，但操作不可逆，个人想尽量简单，所以直接改了 node_modules/react-scripts/config/webpack.config.js，这里用 npm run eject 将 webpack 配置暴露出来也是一样的配置。参考 sass 的配置在sassModuleRegex 下添加
const lessRegex = /\.less$/;
const lessModuleRegex = /\.less$/;
下面这部分需要在"file" loader makes sure those assets get 上添加，也是参考sassRegex和sassModuleRegex
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3, // 用于决定css文件中读取到@import时被外层数组中哪个处理
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
sideEffects: true, // 允许通过配置，标识代码是否有副作用
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
}
},
'less-loader'
),
},
导入
import style from './style.less'
使用
<div className={style.app}></div>
结束。
这部分查了很多解决方式，react 引入 less，基本上都是const lessModuleRegex = /\.module\.less$/; 这样我写的普通样式 body {} 什么的都可以用，但是引入 style.app 就是undefind。困扰很久之后搜到了解决文。本来很久没用到CSDN，想到可能有人会和我一样就纪录一下。
lessModuleRegex 负责 less 模块化，/\.module\.less$/ 需要文件名 xx.module.less 的形式引入才能使用 {style.xx} 这种用法
(110条消息) react18中配置webpack，支持less以及less模块化(补充篇)_新生代农民工官方认证码农小拽的博客-CSDN博客_less模块化
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
