postcss 在 less 后报 css 语法错误，根本原因是 postcss-loader 顺序错误或后缀未匹配，导致其直接处理未编译的 less 源码；正确做法是确保 less-loader 在 postcss-loader 前、显式配置 .less 文件使用 postcss-loader，并对 calc 等函数用 ~"" 转义。
PostCSS 在 Less 后报 CSS 语法错误，基本不是 PostCSS 配错了，而是它收到了未编译的 Less 语法 —— 比如 &:hover、@{color}、.mixin()，直接在词法分析阶段崩掉。
postcss-loader 顺序错：收到的是 Less，不是 CSS
Less 编译必须先完成，输出标准 CSS 字符串，PostCSS 才能接手。如果 postcss-loader 不紧贴 less-loader 后面，它就会拿到原始 Less 源码。
- ❌ 错误顺序：
['style-loader', 'css-loader', 'less-loader', 'postcss-loader']→postcss-loader收到.btn { &:hover { color: @primary; } }，立刻报ParseError: Unrecognised input - ✅ 正确顺序：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader']→less-loader最后执行，把嵌套、变量、mixin 全展开成纯 CSS，再交给postcss-loader - ⚠️ 注意：
css-loader必须在postcss-loader前，否则postcss-loader收到的是require('xxx.css')这种 JS 字符串，不是 CSS
Less 文件里混了 PostCSS 专属语法
@apply、@screen、@layer 是 Tailwind 的 PostCSS 插件定义的规则，Less 编译器根本不认识它们，会直接丢弃整行或报错。
- ❌
button.less中写@apply bg-blue-500;→ Less 解析失败，或静默跳过，浏览器收不到样式 - ❌ 写成
// @apply bg-blue-500→ 还是注释，不会变成有效 CSS - ✅ 真正支持
@apply的路径：改用.css后缀 +postcss-import+@tailwindcss/nesting，所有样式走 PostCSS 链路 - ⚠️ 别指望
postcss-import“救活” Less 文件里的@apply—— 它只在 PostCSS 阶段工作，对.less文件完全不可见
源文件藏了不可见字符或非法注释
Less 对 Unicode 控制字符极其敏感，零宽空格（U+200B）、软连字符（U+00AD）、UTF-8 BOM 都会导致 ParseError: Unrecognised input，且不提示具体位置。
- ? VS Code 开启
editor.renderWhitespace: "all"，重点检查从网页、Word、聊天窗口复制进来的代码 - ? 不要保存为
UTF-8 with BOM；务必选UTF-8 without BOM - ? Less 不支持
//单行注释（除非独占一行且后跟空格），多行注释/* */不能嵌套，也不能紧贴@import行末，例如：@import "mixins.less"; /* 工具类 */容易触发解析异常 - ? 快速验证：新建空白
test.less，只写@test: 1px;，能编译成功说明环境正常；再逐段粘贴原内容，定位崩点
Less 原生函数没转义，被当表达式计算
Less 会主动解析括号内内容，calc()、linear-gradient()、grid-area 里的斜杠和逗号全被误判，输出乱码或报错。
- ❌
width: calc(100% - @gap);→ Less 尝试做减法运算，@gap未定义时直接崩 - ✅ 必须用
~""转义：width: ~"calc(100% - @{gap})"; - ✅
background: ~"linear-gradient(45deg, #f00, #00f)"; - ✅
grid-area: ~"2/2/3/3";（斜杠不转义会被当除法） - ⚠️ 别混写：
calc(100% - @gap)或linear-gradient() + @color—— Less 不支持这种“部分转义”
最容易被忽略的其实是 loader 执行顺序和文件后缀匹配 —— 你以为配了 postcss-loader 就覆盖所有样式，但它默认只处理 .css，对 .less 视而不见，除非你显式把它加进 /\.less$/ 的 use 链里。顺序、后缀、转义，三者缺一都会让错误看起来像“语法问题”，实际是构建链断在了某个环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
