less object is empty in CRA project

[Inuyashaaaaa]

• Operating System: window10
• Node Version: v14.4.0
• NPM Version: 6.14.5
• webpack Version: 4.44.2
• less-loader Version: 5.0.0

Expected Behavior

less object is not empty and can be used for react className to change antd styles

Actual Behavior

less object is empty and can not change antd styles

Code

// src/pages/Login/index.less
:global {
  .ant-input-affix-wrapper {
    height: 50px;
  }
}

// src/pages/Login/index.jsx
import styles from "./index.less";
console.log(styles); // {}

const Login = () => {

  return (
    <div className={styles.scope}>
       // some antd components
    </div>
  );
}

How Do We Reproduce?

clone https://github.com/Inuyashaaaaa/lessErrorRespository and find src/pages/Login/index.less and src/pages/Login/index.jsx

the same question in stack overflow is https://stackoverflow.com/questions/51685999/less-object-is-empty-in-react-webpack
but no body answer

[alexander-akait]

Problem here import styles from "./index.less";, change it on import styles from "./index.module.less"; and rename index.less to index.module.less, CRA uses module prefix for CSS modules