直接改.css为.less会因Less解析器语义差异导致编译失败或样式错乱，需用postcss-less渐进转换、合理封装变量与Mixin、统一命名空间并规范第三方CSS处理。
直接把 .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 被硬编码在组件内部了，变量没被真正复用。
立即学习“前端免费学习笔记（深入）”；
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
实操建议：
- 变量只定义设计系统级常量：如
@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动态插入，消除加载时机干扰
真正难的不是语法转换，是判断哪些值该抽成变量、哪些行为该封成 Mixin、哪些类名该加命名空间——这些决策没法靠工具自动完成，得人盯着设计系统文档一条条对齐。
