React组件无法应用Less模块样式，请求排查问题原因

1. Less语法错误导致编译失败 #

你的Footer.module.less中@import语句缺少分号，这会直接导致Less文件编译失败，无法生成对应的CSS样式：

// 错误写法
@import '~@comp/colors/dist/colors'

// 正确写法
@import '~@comp/colors/dist/colors';

2. CSS Modules类名调用不匹配 #

CSS Modules中，短横线分隔的类名（如.docs-footer）在导出时，两种调用方式都有效，但字符串索引的方式更稳妥：

• 原写法依赖CSS Modules的驼峰转换规则，可能因配置问题失效
• 改用字符串索引验证：

<footer className={styles['docs-footer']}>
  ...
</footer>

3. 手动webpack配置无效 #

CRA默认屏蔽自定义webpack配置，你手动创建的webpack.config.js不会被react-scripts-less加载。react-scripts-less已内置Less处理规则，直接删除该文件即可，避免冲突。

4. react-scripts-less版本兼容问题 #

如果你的CRA版本较新，过时的react-scripts-less可能导致工具链不兼容：

• 卸载现有包：

  npm uninstall react-scripts-less
  

• 安装适配CRA版本的包（以CRA 5.x为例）：

  npm install react-scripts-less@5.0.1 --save-dev
  

5. 普通Less文件的引入问题 #

去掉.module后缀后，需要直接导入样式文件并使用原始类名：

import React from 'react';
import './Footer.less'; // 直接导入整个样式文件

const Footer = () => {
  return (
      <footer className="docs-footer"> {/* 使用原始类名 */}
      ...
      </footer>
  );
};

内容的提问来源于stack exchange，提问作者SkyWalker