直接改.css为.less会导致构建失败，因less解析器将:not()误作函数、calc()提前运算、::before解析中断，应使用postcss-less替代lessc，禁用math计算，并显式声明@import类型。
直接把 .css 改成 .less 后构建失败，不是后缀问题，而是 Less 解析器把原生 CSS 语法当成了待编译表达式——:not() 被当函数、calc() 被提前运算、伪元素被解析中断，结果是报错或样式消失。
Less 解析器会主动“误解”标准 CSS 语法
原生 CSS 的选择器和函数写法，在 Less 里有不同语义边界。解析器不区分“这是 CSS 还是 Less”，只要文件后缀是 .less，就按 Less 规则全量解析：
-
:not(.foo)→ 尝试匹配名为not的函数，报ParseError: missing closing ')' -
::before→ 把双冒号当嵌套开始符，后续内容进错作用域 -
calc(100% - 20px)→ 执行数学插值，变成calc(100% - 20)，CSS 无效 -
/* comment */块注释若含中文或特殊符号，可能触发词法分析失败
正确迁移路径：用 postcss-less 替代 lessc
不要让存量 CSS 经过 Less 编译器，改用 postcss-less 这类兼容层工具，它能识别 CSS 边界、跳过非法语法、保留 calc() 原样输出：
- Webpack 中替换
less-loader为postcss-loader + postcss-less -
calc()不用改写，但需确保postcss-less配置中math: false（禁用自动计算） - 第三方 CSS（如 Ant Design）加
/* webpackIgnore: true */注释，防止被误处理 - 所有
@import必须显式声明类型：@import (reference) "vars.less"，避免重复输出
变量和 Mixin 必须分层封装，不能硬塞进旧 CSS
很多人把 variables.css 直接改成 variables.less，然后在按钮样式里写 color: @primary-color;——这会失败，因为旧 CSS 文件里没有 @import 链路，变量根本没进作用域：
- 入口
main.less第一行必须是@import "variables.less";，顺序不能错 - 禁止在组件级
.less文件里反向@import "../variables.less"，应统一由入口控制 - Vue 单文件组件中的
<style lang="less"></style>是隔离上下文，需手动@import "@/styles/variables.less" - 连字符变量名如
@btn-primary-color会被解析为减法，必须改用驼峰@btnPrimaryColor或引号包裹@'btn-primary-color'
真正难的不是改后缀，是判断哪些 CSS 规则该保留字面量、哪些该转成 Mixin 参数、哪些值必须抽离为设计系统变量——这些决策一旦错位，后续换主题或适配暗色模式时，就得一行行手动修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
