直接全局替换@import会破坏样式优先级，因Less编译时同步合并文件，按@import书写顺序决定CSS层叠顺序，而非原CSS文件加载顺序；须严格按“变量/mixin→基础组件→业务组件→页面定制”分层导入。
为什么直接全局替换 @import 会炸掉样式优先级
Less 不是 CSS 的“升级版”，而是编译时预处理器。很多团队一上来就把所有 .css 改成 .less，再在入口加 @import "all.less"，结果发现按钮变蓝了、间距全乱了——这不是 Less 的锅，是 CSS 层叠规则被悄悄重排了。
Less 编译后仍是纯 CSS，但 @import 在 Less 中是**同步合并**（类似文本拼接），不是浏览器里的异步加载。原来靠文件引入顺序控制的权重，现在被 Less 编译顺序接管，而默认编译顺序往往打乱了你原本靠“后载入覆盖前载入”的隐式约定。
- 别用单个大
@import拉所有样式；按模块拆，比如@import "components/button.less";、@import "layout/header.less"; - 保留原始 CSS 文件的物理顺序逻辑，在 Less 入口里严格按依赖关系排列
@import，把基础变量/混入（.reset、.flex-center）放最前，组件样式放中间，页面级覆盖放最后 - 用
@import (reference)隔离不产出 CSS 的公共定义（比如只放.icon-size()混入），避免重复注入
如何安全地把散落的 !important 和内联 style 拉进 Less 变量体系
遗留项目里满屏 !important 和 HTML 里写的 style="margin-top: 12px"，说明当时没人敢动全局样式。重构时硬删它们，等于主动触发回归测试雷区。不如把它们变成可追踪、可收敛的 Less 变量。
先做一次 grep 扫描：grep -r "!important" src/ | grep -E "\.(css|html)"，把高频值（如 12px、#333、ease-in-out）拎出来，定义为 @spacing-sm、@text-primary、@ease-standard 等。
立即学习“前端免费学习笔记（深入）”；
- 变量命名带语义，不带单位或颜色值本身（比如用
@z-index-dropdown而不是@z-1000） - 对内联 style，用 JS 层配合 Less 变量：把
style="margin-top: @{spacing-sm}"写成 data 属性 + JS 注入，或改用 class 绑定（如mt-sm），再用 Less 生成对应规则 - 所有新写的组件样式禁止用
!important；旧的保留，但加注释// TODO: remove after refactoring header layout，方便后续清理
怎么让老 IE8/9 的 hack（如 *display: inline）在 Less 里不编译失败
Less 默认语法解析器会把 *display 当作非法标识符报错，但这类 hack 在旧项目里真实存在。强行删掉？用户还没下线 IE8，业务不敢动。
Less 提供了「转义」机制，但别用 \*display —— 它只逃过解析，不保证输出正确。更稳的方式是用插值（interpolation）绕过语法检查：
.ie-inline-block() {
display: inline-block;
~"*display": inline;
~"_display": inline;
}
注意：~"" 是 Less 1.4+ 的写法，旧版本用 `*display: inline`（反引号包裹字符串）。
- 把所有 IE hack 抽成独立混入（
.ie-clearfix()、.ie-ellipsis()），统一管理，不散落在各处 - 在构建脚本里加条件判断：开发环境启用 hack 混入，生产构建时通过变量开关（
@include-ie-hacks: false;）彻底剔除 - 别试图用 Less 的
if()函数动态控制 hack——它运行在编译期，无法感知客户端 UA
重构过程中怎样避免 gulp-less 编译卡死或报错中断
遗留项目常有 200+ 个 CSS 文件，直接塞进 Less 编译流水线，gulp-less 很容易因路径错误、编码异常或循环 @import 崩溃，且错误提示极不友好（比如只报 ParseError: Unrecognised input，没行号）。
关键不是调参数，而是分层拦截问题：
- 第一步：用
lessc --lint单独扫描所有.less文件，提前暴露语法问题（它比 gulp 插件报错更准） - 第二步：在
gulp-less里配paths选项明确查找路径，避免相对路径错位；禁用strictImports（默认 true）防止某个@import失败就中断整个编译 - 第三步：给每个
@import加// @ref: components/modal类注释，方便出错时快速定位来源文件
真正麻烦的从来不是语法转换，而是那些藏在注释里、JS 动态拼接的 class 名，还有被 Webpack url-loader 自动处理过的背景图路径——这些不会报错，但会静默失效。得靠视觉回归测试兜底，而不是只信编译成功。
