React中Less文件需用.module.less后缀并配置CSS Modules才能实现组件级作用域；类名须通过styles.xxx访问，全局样式用:global()包裹；按需加载需手动管理style标签生命周期。
React中Less文件默认不是组件级作用域
直接在组件里 import './Button.less'，样式会全局生效，多个组件引用同一类名就会互相污染。这不是“组件级”，只是“文件级”组织，和CSS Modules或CSS-in-JS的隔离目标不一致。
要真正实现组件级作用域 + 按需加载（即只在组件挂载时注入样式、卸载时移除），得靠两件事配合：一是启用 CSS Modules，二是确保 Less 编译后生成带哈希的局部类名，并由 React 组件控制样式表生命周期。
- Webpack 默认不开启 Less 的 CSS Modules 支持，需显式配置
modules: true和localIdentName - Create React App（CRA）2.0+ 内置支持，但仅对
.module.css和.module.less后缀生效 —— 普通.less文件仍走全局流程 - Vite 中需在
vite.config.ts里为less配置javascriptEnabled: true并配合css.modules选项
必须用 .module.less 后缀才能触发 CSS Modules
CRA 和大部分脚手架把“是否启用模块化”绑定在文件扩展名上，不是靠配置开关自动识别。写成 Button.module.less，再 import styles from './Button.module.less'，编译器才会把 .btn 编译成类似 Button_btn__kx9v2 的唯一标识。
如果坚持用 Button.less，哪怕配置了 modules，Webpack 也不会处理它 —— 这是约定优先的设计，不是 bug。
- 类名必须通过
styles.xxx访问，不能硬写字符串"btn"；否则运行时找不到对应样式 - 动态类名要用方括号语法：
className={styles[isPrimary ? 'btnPrimary' : 'btnSecondary']} - 全局类（如重置或第三方库样式）需用
:global(.el-input)包裹，否则会被模块化规则转义
按需加载 ≠ 自动卸载，需要手动管理 style 标签
CSS Modules 解决了作用域，但没解决“卸载组件时移除对应样式”。Webpack 的 style-loader 默认把所有样式插入 并常驻，即使组件已销毁，样式仍留在 DOM 中。
真正按需，得换用 isomorphic-style-loader 或自己封装一个轻量 hook，监听组件挂载/卸载时机来 append/remove
- 推荐方案：用
useEffect+insertRule注入 CSSText（适合简单场景） - 复杂项目可引入
react-jss或styled-components，它们内置样式生命周期管理 - 注意 SSR 场景：服务端渲染时不执行
useEffect，需提前收集样式并注入初始 HTML 的
Less嵌套与变量在模块化下仍可用，但路径引用要小心
@import 在 .module.less 中照常工作，比如 @import '../../styles/variables.less';，变量和 mixin 会被正确解析。但要注意相对路径基于当前文件，不是入口。
最常踩的坑是：在 Button.module.less 中 @import '../mixins/hover.less'，而 hover.less 里写了 .hover { ... } —— 这个 .hover 不会被模块化，会变成全局样式，污染其他组件。
- 所有被
@import进来的 Less 文件，如果含顶层选择器，也应命名为xxx.module.less - 纯变量/mixin 文件建议用
.less后缀，但只允许@define-style 声明，禁止任何选择器 - 使用
composes复用样式时，来源文件也必须是.module.less，否则编译报错
真正卡住人的地方不在 Less 语法，而在构建链路中“模块化开关”的隐式触发条件和样式标签的生命周期控制。很多团队改完后发现样式还在、类名没变长、热更新失效，八成是后缀没对、loader 配置没生效，或者压根没意识到 style-loader 不卸载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
