Let me publish the correct answer: to use css-module, you need to name the css file fileName.module.less, and then you can introduce it into the component and use it normally, as follows:

Note that by default the suffix must be .module.less to be written as css-module

for example, the following code:
import React, {Component} from "react";
import {Button} from "antd";
import styles1 from ". / index.module.less";

class Hello extends Component {
render () {

return (
  <div className={styles1.main}>
    hello
    <div className={styles1.text}>world</div>
    <Button type="primary"></Button>
    <div className="text1">heihei</div>
  </div>
);

}
}

export default Hello;

this will take effect

import styles'. / App.less', missing a from import styles from'. / App.less'

the second thing is to see if you start module: true, which is the so-called modularization! The specific need to see your configuration to ask the price! It will be available as soon as you move online

in webpack, set disableCSSModules to false

how to solve the problem. According to the configuration settings, running the less file has no effect