Less的@import默认是嵌套导入，直接全局替换会导致样式优先级混乱；应改用@import (reference)避免重复输出，对第三方CSS用@import (inline)，并监控编译后文件体积。
为什么直接全局替换@import会炸掉样式优先级
Less 的 @import 默认是「嵌套导入」，不是 CSS 原生的「链接式加载」。你把一个 main.css 改成 main.less 并用 @import "reset.css"，Less 编译器会把 reset.css 内容原样塞进 main.less 里——但没加作用域、没转义、没处理选择器权重重叠。结果往往是重置样式被后面模块覆盖，按钮突然变蓝，表单边框消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
.css文件先重命名为.less，但不急着改内容； - 用
@import (reference) "reset.less"引入基础文件，避免重复输出； - 对含
!important或高权重要求的规则（如第三方 UI 组件），单独建vendor-overrides.less，用@import (inline) "antd.css"原样保留； - 检查编译后 CSS 文件大小，若暴涨 30% 以上，大概率是
@import没加(reference)导致多重展开。
怎么给已有 class 名自动加命名空间避免冲突
大型项目里 .btn、.modal 这类通用名满天飞，直接上 Less 变量或嵌套会破坏现有 HTML 结构。不能靠人眼改 class，得让工具帮你“套壳”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 PostCSS 插件
postcss-prefix-selector配合 Less 编译流程，在构建时统一加前缀，比如把所有.btn变成.myapp-btn； - 在 Less 中定义命名空间变量：
@ns: ~".myapp";，再写@{ns}-btn { ... }，但只用于新模块，老代码不碰； - 禁止在
.btn:hover这种伪类里嵌套&再套命名空间——容易生成.myapp-btn.myapp-btn:hover这种冗余选择器； - HTML 中保留原 class，靠 CSS-in-JS 或 BEM-style 的
class="myapp-btn myapp-btn--primary"渐进升级，别指望一次全扫。
变量提取的边界在哪：哪些该抽，哪些必须留原生 CSS
不是所有颜色/间距都适合放进 @color-primary。Less 变量一旦抽象，就脱离了上下文语义。比如同一个 #333 在标题里是「主文字色」，在边框里是「分割线色」，在禁用态按钮里是「不可操作提示色」——强行共用一个变量，后期改一个地方，三处全崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只抽「设计系统级常量」：品牌色、字体栈、断点值（
@breakpoint-md: 768px）； - 组件内局部值（如
.card的阴影偏移）用lighten()、fade()等函数动态算，不抽变量； - 第三方 CSS（如 Chart.js 图表样式）不抽变量，用
:host ::ng-deep（Angular）或data-theme属性做隔离； - 用 VS Code 插件
Color Highlight扫描全项目十六进制色值，重复出现 ≥3 次且语义一致的才考虑变量化。
Webpack 中 Less 加载器怎么避开 resolve-url-loader 的坑
Less 里写 background: url(../img/icon.png)，Webpack 默认不会重写路径，导致编译后路径错乱。很多人装 resolve-url-loader，但它和 sourceMap 一起开时极易报 Cannot resolve relative path 错误，尤其在 @import 嵌套层级 >3 时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关掉
resolve-url-loader，改用 Less 自带的paths配置项，在less-loader里加：{ paths: ["src/styles"] }； - 所有图片路径统一用绝对路径写法：
url(/assets/icon.png)，由 Webpack 的public目录托管； - 如果必须相对引用，确保
@import和url()在同一层级，避免跨文件夹跳转； - 开启
less-loader的javascriptEnabled: true仅用于调试，上线前必须关——它会让eval()进入样式逻辑，审计过不了。
最麻烦的从来不是语法转换，而是旧项目里那些没写注释的 hack 规则、靠顺序覆盖实现的“巧劲”，还有藏在 JS 字符串拼接里的内联样式。迁移时盯住浏览器 DevTools 的「Computed」面板，比对着看每一行来源，比跑十遍编译更重要。
