把 '.less' 文件 改名为 '.module.less'
import styles from './index.module.less'
<div className={styles.page}></div>
修改 craco.config.js 文件，添加下面内容
const CracoLessPlugin = require('craco-less')
plugins: [ # 在plugins 数组添加下面部分
{
plugin: CracoLessPlugin,
options: {
modifyLessRule(lessRule, context) {
// You have to exclude these file suffixes first,
// if you want to modify the less module's suffix
lessRule.exclude = /\.m\.less$/
return lessRule
},
modifyLessModuleRule(lessModuleRule, context) {
// Configure the file suffix
lessModuleRule.test = /\.m\.less$/
// Configure the generated local ident name.
const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
cssLoader.options.modules = {
localIdentName: '[local]_[hash:base64:5]'
}
return lessModuleRule
}
}
}
],
修改 react-app-env.d.ts 文件， 添加一下内容， 解决 找不到 模块的问题
declare module '*.module.less' {
const classes: {
readonly [key: string]: string
}
export default classes
declare module '*.less'
}
