我使用CRA生成了一个新项目，然后使用less包添加了对less的支持。我有一个react Footer组件设置如下，但类没有被应用。我使用Chrome的开发工具来验证类docs-footer没有设置，事实上，footer元素根本没有设置任何类：
Footer.module.less文件：

@import '~@comp/colors/dist/colors'

.docs-footer {
   padding-top: 10px;
   text-align: center;

   ... more stuff
}

Footer.jsx文件：

import React from 'react';
import styles from './Footer.module.less'

const Footer = () => {
  return (
      <footer className={styles.docsFooter}>
      ...
      </footer>
  );
};

export default Footer;

webpack.config.js:

module.exports = {
    rules: [{
        test: /\.less$/,
        use: [{
            loader: 'style-loader',
        }, {
            loader: 'css-loader', // translates CSS into CommonJS
        }, {
            loader: 'less-loader', // compiles Less to CSS
        }],
    }],
}

然后还在CRA上使用react-script-less和我的package.js的这一部分：

"scripts": {
    "start": "react-scripts-less start",
    "build": "react-scripts-less build",
    "test": "react-scripts-less test"
}

是什么导致了这个问题？注意，我也尝试过不使用.module约定，只使用Footer.less作为文件名，但也不起作用。