Less文件默认不走CSS Modules流程，需显式配置.module.less后缀及loader链路；真隔离仅靠外层命名空间或构建插件前缀；composes语法Less不识别，第三方库样式需:global()透出或按需引入。
Less 文件没被 CSS Modules 接管，类名照样全局污染
你写了 .Button { color: red; }，也配了 css-loader 的 modules: true，但浏览器里还是看到原样类名——说明 Less 文件根本没走 CSS Modules 流程。Webpack/Vite 默认只对 .module.css 或 .module.scss 生效，.less 文件即使加了 modules: true 也不会自动哈希类名。
常见错误：
- 把
Button.less改成Button.module.less，但没在 loader 配置里告诉less-loader后续交给css-loader?modules - 用了 umi，默认只对
.module.css开启 CSS Modules，.module.less需显式配置cssModulesExcludes: []并确保less-loader输出能被css-loader拦截 - 在 Vue 单文件组件里写
<style lang="less" module>，但没确认vue-style-loader+css-loader?modules链路是否完整
想用 Less 写模块化样式，必须手动加命名空间或改构建链路
Less 本身不提供作用域，{ .header { h1 { color: red; } }} 编译后仍是全局生效的 .header h1。真要隔离，只有两个务实路径：
- 每个 Less 文件最外层套一个唯一根类，比如
.MyComponent { .button { ... } }，所有样式都锚定在这个容器下 - 用构建插件（如
postcss-prefixwrap）在编译后自动给整个 Less 输出加前缀，例如包裹成[data-scope="my-comp"] .button - 放弃 Less 模块化幻想，直接切到
.module.scss或.module.css，让 CSS Modules 原生接管
注意：composes 是 CSS Modules 语法，Less 解析器不认识，写进去直接报 ParseError: Unexpected token 'composes'。
立即学习“前端免费学习笔记（深入）”；
第三方 UI 库的 Less 变量和 mixin 无法被 CSS Modules 隔离
像 Ant Design 的 @import '~antd/lib/style/themes/default.less' 这类全局引入，变量、mixin、基础重置规则全在全局作用域。即使你自己的 Button.module.less 走了 CSS Modules，它里面用的 .ant-btn 类名依然会撞上库自带的样式规则。
可行做法：
- 把第三方库的样式用
:global()显式透出，避免被哈希：在.module.less里写:global(.ant-btn) { ... } - 用外层命名空间包裹整个应用区域，比如
<div data-scope="admin">...</div>，再配合 CSS 选择器前缀控制影响范围 - 禁用第三方库的默认样式加载，只按需 import 组件对应的部分 Less（如
~antd/lib/button/style/index.less），再用命名空间包裹
Vue / React 中混用 Less 和 CSS Modules 容易漏掉作用域边界
Vue 的 <style scoped> 和 CSS Modules 不是一回事：<style lang="less" scoped> 用属性选择器隔离，但弹窗类组件（如 el-date-picker）挂载到 body 下，就逃出了 scoped 的 data 属性控制；而 <style module> 是真正的模块化导入，但仅限于单文件组件内，无法覆盖第三方组件内部结构。
典型翻车点：
- 写了
<style module lang="less">，以为自动模块化，结果发现类名没哈希——因为 Vue CLI 默认不支持lang="less"+module组合 - 在 React 里 import
./Button.module.less，但忘了配置less-loader的javascriptEnabled: true，导致@import失败，变量未注入 - 用
clsx拼接styles.button和第三方类名（如"ant-btn ant-btn-primary"），结果权重被.ant-btn.ant-btn-primary（0,0,2,0）碾压，自己写的styles.primary（0,0,1,0）完全无效
真正起效的隔离，从来不是靠写得有多规范，而是看构建链路有没有把样式文件真正送进 CSS Modules 的处理管道——没进，再漂亮的 BEM 命名也只是自我安慰。
