必须用.module.less后缀才能触发css modules，webpack依据文件名规则识别模块化样式，配合css-loader的modules配置实现真正的组件级样式隔离。
直接用 .module.less 文件 + Webpack 的 css-loader?modules 配置，就能实现真正的组件级样式隔离。其他方式（比如手动加前缀、BEM 命名）只是缓解冲突，不是隔离。
必须用 .module.less 后缀才能触发 CSS Modules
Webpack 识别模块化样式的依据是文件名规则，不是内容或 import 方式。如果你写了 MyComponent.less 却期望它自动隔离，那它就是全局的——哪怕你只在 MyComponent 里 import 它。
- ✅ 正确命名：
MyComponent.module.less、Button.module.less - ❌ 错误命名：
MyComponent.less、styles.less、index.module.css（后缀不匹配 Less） - Webpack 规则中必须明确匹配
/\.module\.less$/，否则css-loader不会开启modules: true - 如果用了
create-react-app且没eject，默认不支持.module.less——需通过craco或react-app-rewired注入自定义配置
import styles from './X.module.less' 返回空对象？检查 exclude 和 loader 执行顺序
常见现象：控制台打印 styles 是 {}，但文件明明存在、语法也正确。本质是 Webpack 把这个文件交给了普通 less-loader 处理，跳过了 css-loader?modules。
- 确保
module.rules中处理.module.less的 rule 在普通.lessrule 之前（顺序敏感） - 普通
.lessrule 必须exclude: [/node_modules/]，否则 antd 等库的 less 会被误处理 -
.module.lessrule 里不能写exclude，否则你自己写的模块文件可能被跳过 - 别漏掉
style-loader——没有它，CSS 不会注入 DOM，styles对象虽有值，但页面无效果
Less 变量和 mixin 在 .module.less 里天然不污染全局
Less 编译器本身不提供作用域隔离，但 css-loader 的 modules 模式会让每个 .module.less 文件独立编译，变量/mixin 不会跨文件泄漏。
- 可以在
Button.module.less里放心写@primary: #007bff;，它不会覆盖Header.module.less里的同名变量 - mixin 如
.btn-base() { padding: 8px 16px; }只在当前文件生效，外部无法调用（除非显式export，但不推荐） - 想复用基础样式？用 class 组合：
.btn { .btn-base(); }，而不是extend——后者会破坏模块隔离 - 不要在
.module.less里用@import引入全局变量文件（如variables.less），否则主题色等会穿透到所有组件 —— 改用@import (reference)或提取为 JS 常量
动态 className 拼接要小心 styles.xxx 是字符串，不是 CSS 类名原文
css-loader 生成的类名是哈希化的（如 Button_container__abc123），所以不能硬编码拼接或用字符串模板直接塞进 className。
- ✅ 正确：
className={styles.container}、className={`${styles.container} ${styles.active}`} - ❌ 错误：
className="container"、className={`container ${styles.active}`}（前者无效，后者混用全局+模块类） - 带连字符的类名（如
.btn-primary）在 JS 中要用方括号：styles['btn-primary'] - 条件 className 推荐用
clsx库：className={clsx(styles.container, { [styles.disabled]: isDisabled })}
真正起作用的是 Webpack 配置和文件命名的组合，不是 Less 语法本身。漏掉任意一环（比如忘了改后缀、loader 顺序错、没 exclude node_modules），都会让样式悄悄逃出组件边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
