直接改.css为.less会导致编译失败，因Less解析器将:not()误作函数、calc()提前运算、::before解析中断；应使用postcss-less替代lessc，禁用math计算，并显式声明@import类型。
直接把 .css 文件后缀改成 .less 并加 @import，90% 的项目会编译失败或样式错乱——这不是配置问题，而是 Less 解析器和原生 CSS 运行时语义根本不同。
为什么原生 CSS 改后缀就报错
Less 默认把 :not(.foo)、::before 这类含括号/冒号的语法当成函数调用，触发 ParseError: missing closing ')'；calc(100% - 20px) 会被提前插值计算，变成 calc(100% - 20) 导致无效；还有选择器嵌套歧义、注释格式不兼容等问题。
常见错误现象：ParseError、编译后 calc() 失效、伪元素样式消失、媒体查询被重复输出多次。
-
postcss-less替代lessc做渐进式转换，它能识别原生 CSS 语法边界，不破坏现有结构 -
calc()必须写成width: calc(~"100% - 2*@spacing-md")，否则 Less 会尝试数学运算 - 对 IE11 等老环境，关闭
strictMath: true，否则10px / 2这类除法直接拒绝编译
如何避免变量和 Mixin 引入全局污染
很多人一股脑把所有颜色、边距塞进 variables.less，结果换主题时按钮边框色不变——因为 @button-border 被硬编码在组件内部了，变量没被真正复用。
立即学习“前端免费学习笔记（深入）”；
- 变量只定义设计系统级常量：如
@primary-color、@spacing-lg，不定义组件专属值（比如@input-padding） - 组件逻辑用
.input-style()这类 Mixin 封装，把 padding、border、focus 状态聚合起来，替换时只改 Mixin 调用参数 - 所有
@import改用@import (reference)，防止breakpoints.less在 10 个组件里重复输出同一套媒体查询 - 命名空间统一用变量控制：
@ns: "myapp"; .<code>@{ns}-button{ }，构建时可注入不同前缀
Webpack 中 Less 和原生 CSS 共存时样式优先级混乱
不是“后加载的 CSS 生效”，而是 <link> 插入顺序 + @import 嵌套深度 + CSS specificity 共同决定——你看到按钮变蓝，可能是第三方 normalize.css 被 Less 嵌套导入后权重大于你的组件样式。
- 存量 CSS 统一重命名为
.css.less，全部走 Less 编译流程，确保作用域和变量一致 - 必须保留的第三方 CSS（如 Ant Design）加
/* webpackIgnore: true */注释，防止被less-loader误处理 - 禁用
css-loader的modules: true，Less 默认不支持模块化，开了会导致.btn类名原样输出但无对应样式 - 用
MiniCssExtractPlugin提取所有样式为静态.css文件，禁用style-loader动态插入，消除加载时机干扰
真正难的不是语法转换，而是厘清哪些规则该进 Less、哪些必须保留在原生层——比如第三方 UI 库的覆盖样式，硬塞进 Less 反而让维护链路断裂；还有那些依赖运行时 JS 计算的 class 名（如 .col-<span id="dynamic"></span>），原生 CSS 嵌套根本无法替代。
