less 必须先于 postcss 执行，因为 less-loader 输出标准 css 字符串，而 autoprefixer 等插件仅能处理合法 css ast；若 postcss-loader 在 less-loader 前执行，会收到含 @mixin、嵌套等原始 less 语法，直接跳过或报错。
Less 和 PostCSS 的执行顺序为什么必须是 less → postcss
因为 less-loader 输出的是标准 CSS 字符串，而 autoprefixer、@tailwindcss/nesting 等 PostCSS 插件只能解析合法 CSS AST；如果 postcss-loader 在 less-loader 前执行，它收到的是含 @mixin、& 嵌套、变量 @color 的原始 Less 语法，直接跳过或报错 Unknown word。
Webpack 的 use 数组执行顺序是从右往左，所以正确链路必须写成：
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: { plugins: ['autoprefixer'] }
}
},
'less-loader'
]
- ❌ 错误：把
postcss-loader放在less-loader左侧（即数组靠前位置），它根本收不到 CSS - ❌ 错误：只给
/\.css$/配了postcss-loader，却漏掉/\.less$/规则 - ✅ 验证方法：临时在
.less文件里写一条带display: flex的规则，编译后检查输出 CSS 是否含-webkit-box等前缀
为什么 @apply 和 @screen 在 .less 文件里一定失效
@apply 和 @screen 是 Tailwind 官方 PostCSS 插件定义的自定义规则，不是 CSS 标准语法；Less 编译器遇到它们会当作未知 at-rule 直接丢弃，连警告都不报。
- 你在
button.less里写@apply bg-blue-500;→ 编译后这行消失，浏览器收不到任何样式 - 用
// @apply bg-blue-500注释 → 还是注释，不会变成有效 CSS - 试图
@import "tailwind.css"→ Less 把它当普通 CSS 透出，但此时@apply还没被 PostCSS 处理，浏览器直接忽略整条规则
真正能用 @apply 的唯一路径：所有样式文件改用 .css 后缀，配合 postcss-import 和 @tailwindcss/nesting，且 postcss-loader 必须覆盖 .css 规则。
如何检查你的构建链是否真正在处理 .less 文件
很多人以为配了 postcss-loader 就万事大吉，其实它默认只处理 .css，对 .less 视而不见——除非你显式把它加进 /\.less$/ 的 use 链里。
- 打开 Webpack 配置，确认
module.rules中匹配/\.less$/的 rule 的use数组包含postcss-loader - 检查
postcssOptions是否包裹在options下，旧版写法plugins: [...]在新版本中会被忽略 - 运行
npx lessc --version，若 ≤ 3.9.0，升级到less@^4.2.0，否则某些嵌套场景下 AST 构建失败，PostCSS 根本收不到输入 - 在
package.json中确认browserslist存在且合理，例如："browserslist": ["last 2 versions", "IE >= 11"]—— 没这条，autoprefixer默认不加 IE 前缀
Less 与 PostCSS 共存时最容易被忽略的兼容点
不是所有 PostCSS 功能都能和 Less 安全叠加。有些插件依赖 CSS 输入的“纯净度”，而 Less 编译后的 CSS 可能带非标准注释、多余空行或未标准化的单位写法。
-
postcss-normalize可以安全使用，但它必须作用于最终 CSS，不能靠@import (reference) "normalize.css"—— 那样什么都不会输出 -
cssnano压缩前务必确认它接收的是已加前缀的 CSS，否则可能删掉尚未生效的-webkit-规则 - 如果你用了
@import "xxx.css"，Less 会原样透出该 CSS，但其中的@import不会被postcss-import处理 —— 要么全切到postcss-import，要么删掉 Less 里的@import
真正的边界在于：Less 负责变量、嵌套、mixin 展开；PostCSS 负责前缀、重置、原子化、压缩。两者不能越界，也不能指望对方补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
