webpack压缩css后less样式丢失，本质是css-minimizer-webpack-plugin未适配less编译特性：需禁用parallel、配置clean-css保留@import、确保less-loader启用javascriptenabled、避免sideeffects误删、规范@import顺序，并验证less-loader是否真实执行。
Webpack压缩CSS后Less样式丢失，本质是压缩插件没配对
不是Less写错了，也不是路径错了，而是css-minimizer-webpack-plugin默认不处理@import链和源码映射，一压就把less-loader输出的中间CSS“压塌”了——比如嵌套规则被扁平化、媒体查询被误删、甚至整个@import语句被当注释干掉。
常见现象：开发环境样式正常，build后部分组件变回浏览器默认样式；Network里CSS文件存在且200，但打开看内容明显缩水（比如没了@media (max-width: 768px)）；控制台无报错，document.styleSheets[0].cssRules.length比开发时少一大截。
-
css-minimizer-webpack-plugin必须显式启用parallel: false——Less编译后的CSS含大量重复选择器和冗余空格，多线程压缩会破坏顺序依赖 - 必须传
minimizerOptions给clean-css后端：{ level: { 1: { specialComments: 0 } } }，否则@import语句可能被当成注释清除 - 若用了
postcss-loader（比如加autoprefixer），确保它在css-loader之后、less-loader之前——压缩器只认最终CSS，不认Less源码
Less变量/混入在压缩后失效，其实是javascriptEnabled没生效
Ant Design或自定义主题中用.bezierEasingMixin()、unit(@size, px)这类带JS逻辑的Less语法，压缩阶段不会报错，但产出的CSS里对应规则直接消失——因为less-loader根本没执行这些语句，css-minimizer-webpack-plugin自然也无从压缩。
关键点：webpack配置里less-loader的lessOptions必须包含javascriptEnabled: true，且该选项**不能被压缩插件覆盖或忽略**。
- Webpack 5 + less-loader@7+：必须写成
{ loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true } } }，写成javascriptEnabled: true顶层会静默失效 - 如果用了
MiniCssExtractPlugin抽离CSS，要确认less-loader在生产环境rule中仍被调用——有些配置把lessrule exclude 给了file-loader，导致.less文件被当成静态资源复制而非编译 - 检查
node_modules/less是否真实安装：漏装less包时，less-loader会fallback到空输出，压缩器照常运行，结果就是“样式丢了但没报错”
压缩后CSS文件体积异常小，大概率是purge或sideEffects误删
尤其在集成Tailwind或使用sideEffects: [".css", ".less"]时，Webpack的tree-shaking会把未被JS直接import的Less文件判定为“无副作用”，连同其@import链一并丢弃——压缩插件拿到的是空内容，输出当然只有几行。
典型表现：dist目录下CSS文件存在，但ls -l显示大小不到1KB；打开文件发现只有/*# sourceMappingURL=xxx.css.map */一行；less文件明明被HTML里<link>引用，却没进构建流。
- 检查
webpack.config.js中optimization.sideEffects：设为false可快速验证是否是它导致的，但长期方案是把所有全局Less入口显式列在数组里，如["./src/styles/main.less", ".css"] - Tailwind用户：确认
tailwind.config.js中purge字段已包含所有Less文件路径，例如purge: ["./src/**/*.less", "./src/**/*.html"]，否则css-minimizer-webpack-plugin压缩前，Tailwind已把类名清空 - 若用
MiniCssExtractPlugin，确保其filename和chunkFilename没写死成main.css——多个Less入口可能被合并又拆分，导致部分样式被覆盖
压缩后样式顺序错乱，别怪插件，先查@import位置
Less里@import不是“加载”，而是“文本插入”。压缩器按最终CSS字符串顺序工作，如果main.less里@import 'normalize.less'写在最后，压缩后normalize.css规则就会出现在最底部，被后面更高优先级的选择器覆盖——看起来像“丢失”，其实是被盖住了。
这不是bug，是Less设计使然。修复成本低，但容易被忽略。
- 所有全局重置、变量、混入的
@import必须放在主Less文件最顶部，且用@import (css)引入纯CSS（如normalize.css），避免Less解析器二次处理 - 避免在组件级Less里
@import全局文件——每个组件都引一次，压缩后会生成多份重复规则，压缩器可能合并失败或保留最后一份 - 用
MiniCssExtractPlugin时，检查runtimeChunk: 'single'是否开启：关闭它会导致CSS chunk加载顺序不可控，压缩后更难调试
真正麻烦的从来不是压缩本身，而是压缩前的CSS已经因less-loader配置、Webpack resolve规则、sideEffects判定等环节被悄悄改写过。盯着压缩插件调参数，不如先用console.log打点less-loader输出的原始CSS字符串——那才是你真正要压缩的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
