Less压缩后样式在旧浏览器失效，主因是cssnano默认启用discardUnused和normalizeWhitespace，误删-ms-前缀、@supports块及IE专属规则；须禁用这两项，并确保Autoprefixer在压缩前按browserslist正确补全前缀，且IE不支持的语法（如gap、var、grid）需手动降级。
Less压缩后样式在旧浏览器里失效，不是压缩的问题
Less本身不压缩CSS，真正做压缩的是构建工具（如webpack的TerserPlugin或cssnano）。所谓“压缩后异常”，99%是压缩阶段移除了关键兼容性代码，比如@supports块、手动写的-ms-前缀，或把display: -ms-grid和display: grid合并成一条导致IE直接忽略。
- 压缩器默认启用
discardUnused，会删掉它认为“没用”的规则——而@supports (display: grid) { ... }里的后备块常被误判为冗余 -
cssnano5.x+ 默认开启normalizeWhitespace，可能把display: -ms-grid;和display: grid;压成display:grid;，丢失前缀 - 如果用了
autoprefixer但没配browserslist，它根本不会输出-ms-前缀，压缩器再一删，IE里只剩空白
Webpack中cssnano必须关掉discardUnused和normalizeWhitespace
在postcss.config.js或webpack.config.js里显式禁用这两项，否则压缩器会把IE必需的降级逻辑当垃圾清掉：
module.exports = {
plugins: [
autoprefixer(),
cssnano({
preset: ['default', {
discardUnused: false,
normalizeWhitespace: false,
}]
})
]
}
-
discardUnused: false：保留所有@supports块、媒体查询里的后备规则 -
normalizeWhitespace: false：避免把display: -ms-grid;压成display:grid;（IE11只认带前缀的写法） - 别用
cssnano/preset-default简写，它隐含启用这些危险选项
压缩前确保Autoprefixer已正确补全前缀
压缩只是“收尾”，前缀必须在压缩前就生成好。常见错误是postcss-loader位置错或browserslist没生效：
- 检查
postcss-loader是否紧接less-loader之后，顺序错=前缀全丢 - 运行
npx browserslist确认输出含IE 11（如果项目真要支持） - 在编译后的CSS里搜
-ms-flexbox或-ms-grid，没出现说明autoprefixer根本没工作 - 不要在Less里手写
display: -webkit-flex;——压缩器会把它和标准语法合并，现代浏览器反而加载冲突规则
IE11专属属性必须手动降级，不能靠压缩或Autoprefixer
autoprefixer只加前缀，不改语法；cssnano只删空格，不转语法。IE11不支持gap、var(--x)、place-items，这些必须人工替换：
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px→ 拆成margin或用flex模拟（IE11支持flex但不支持gap） -
color: var(--primary);→ 必须写成color: #007bff;并用@replace或构建插件替换 -
display: grid→ 只能换display: -ms-grid+-ms-grid-columns等专用属性，autoprefixer不会帮你生成整套 - 所有这类降级必须在Less源码里完成，压缩器不会“智能修复”语法
最容易被忽略的是：压缩器不会告诉你哪些规则被删了，它只会静默移除。打开最终生成的CSS文件，直接搜-ms-和@supports，缺哪个就补哪个——别信“配置好了就万事大吉”。
