将.css直接改为.less往往会导致构建失败，根本原因并不在文件后缀本身，而在于 Less 解析器会把原生 CSS 语法误判为可编译表达式，例如把:not()识别成函数、提前计算calc()、打断::before的解析。因此，更稳妥的做法是使用postcss-less替代lessc，同时关闭math计算，并为@import显式声明类型。

如果直接把 .css 重命名为 .less 后出现构建报错，问题通常不是扩展名修改，而是 Less 编译器把标准 CSS 语法当成了需要处理的 Less 表达式——例如 :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，不要让旧的 CSS 直接经过 Less 编译器，而应使用 postcss-less 这类兼容性更好的方案。它能够更准确地识别 CSS 语法边界、跳过不兼容写法，并保留 calc() 等原生函数的原样输出：

• 在 Webpack 配置中，用 postcss-loader + postcss-less 替换原有的 less-loader
• 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 单文件组件的