less组件化需三原则：一用scope前缀隔离变量（如@card-bg-color）；二限制嵌套≤3层并禁跨组件@import；三主题切换须预编译多套css而非运行时改变量。
Less变量与嵌套如何避免样式泄漏
Less里用@color-primary或&嵌套看似方便，但组件复用时极易污染全局。比如.header { &__title { color: @color-primary; } }，一旦多个组件都定义@color-primary，编译后就变成同一份CSS变量，改一个全崩。
- 组件级变量必须用
scope命名前缀，如@card-bg-color而非@bg-color - 嵌套层级别超过3层，
&会生成冗长选择器（.card .card<strong>body .card</strong>body-title），影响渲染性能 - 不要用
@import直接引入未封装的通用变量文件，应通过.module.less显式透出所需变量
.card {
@card-border-radius: 8px;
border-radius: @card-border-radius;
&__header { /* ... */ }
}
如何让每个组件的Less只输出自身CSS
默认lessc编译是扁平合并，card.less和button.less里的.btn会撞车。关键不是“怎么写”，而是“怎么组织编译入口”。
- 每个组件必须有独立的
index.less，且仅包含@import本组件内部文件（禁止跨组件@import） - Webpack中配置
less-loader的additionalData要关掉，否则全局注入会破坏模块隔离 - 使用
css-modules配合Less时，:global(.btn)只能用于真正需要穿透的场景，否则等于放弃模块化
常见错误：在button/index.less里@import "../../shared/mixins.less"——这会让所有引用button的页面都带上mixins里定义的.clearfix等通用类，造成隐式依赖。
动态主题切换时Less变量为何不生效
Less变量在编译期求值，@theme: dark;写死就固定了。所谓“运行时换肤”，本质是预编译多套CSS，再靠JS切换<link>。
- 别用
modifyVars配lessc做构建时主题切换，它只生成一份CSS，无法满足多主题并存 - 正确做法是为每种主题建独立入口：
theme-dark.less、theme-light.less，各自@import组件index.less - 所有颜色/间距变量必须抽成
variables/theme-dark.less这类文件，禁止在组件内硬编码#333
典型报错：Cannot resolve variable @text-color——说明theme-less没被正确@import到当前编译链路，检查路径是否用了相对路径而没配paths。
Webpack中Less模块化编译失败的三个高频原因
Module build failed (from ./node_modules/less-loader/dist/cjs.js):后面跟的往往不是语法错，而是结构错。
-
less-loader版本≥8.0后，options里必须显式写lessOptions: { paths: [...] }，否则@import "mixins"找不到路径 - 使用
postcss-loader时，若启用了autoprefixer，需确认其browserslist配置没把IE11等旧环境漏掉，否则calc()等函数会被错误降级 - 组件
index.less里写了@import "../reset.css"——Less不支持直接import CSS，得用@import (inline) "../reset.css"或改用css-loader处理
最常忽略的一点：组件目录下index.less如果没被任何JS文件import，Webpack根本不会触发它的Less编译，也就不会报错——你以为模块化了，其实那部分样式压根没进打包流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
