把 '.less' 文件 改名為 '.module.less'

import styles from './index.module.less'

<div className={styles.page}></div>

修改 craco.config.js 文件，添加下面內(nèi)容

const CracoLessPlugin = require('craco-less')

plugins: [ # 在plugins 數(shù)組添加下面部分
    {
      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 文件， 添加一下內(nèi)容， 解決 找不到 模塊的問題

declare module '*.module.less' {
  const classes: {
    readonly [key: string]: string
  }
  export default classes
  declare module '*.less'
}

更多請(qǐng)參考 craco-less 文檔： https://www.npmjs.com/package/craco-less