react18中配置webpack，支持less以及less模块化(补充篇)

本篇的目的是：

通过修改配置，让react支持.less文件的模块化

---

之前写过一篇在react里配置less-loader和css-modules，

该配置对react18也是有效的。

本篇是对上一篇的补充。

上一篇中，css和less要做模块化，

样式文件名必须写成xx.module.css或者xx.module.less的形式。

这在实际开发中，仍然不够友好，毕竟样式文件名中要一直加上.module这个后缀。

本篇中就来解决这个问题。

在webpack.config.js配置文件中找到这样的代码：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

这些是我们配置过less的。

lessModuleRegex是负责less模块化的，该变量是对less模块化文件的一个规范，

也就是说，模块化的less文件名必须是xx.module.less的形式。

要让react支持.less形式的模块化，只需要把

const lessModuleRegex = /\.module\.less$/;

改为：

const lessModuleRegex = /\.less$/;

即可。

---

用例测试：

Demo.jsx

import React from 'react'
import styles from './demo.less'

function Demo() {
  return <div className={styles.demo}>
    this is a demo
  </div>
}

export default Demo

demo.less

.demo {
  color: red;
}

页面渲染结果：

---