css压缩合并必须由构建工具在依赖解析阶段统一处理，否则顺序错、@import失效、重复规则残留；webpack需minicssextractplugin提取+css-minimizer-webpack-plugin压缩，postcss需提前内联@import并交cssnano全局分析。
压缩和合并 CSS 不能靠“拼文件”完成，必须由构建工具在依赖解析阶段统一处理，否则顺序错、@import 失效、重复规则残留——线上样式崩溃往往就在这一步。
Webpack 中用 MiniCssExtractPlugin + css-minimizer-webpack-plugin
Webpack 5 默认不压缩 CSS，哪怕你用了 MiniCssExtractPlugin 提取样式，输出仍是明文。必须显式接入压缩插件，且顺序和配置稍有偏差就会白忙活。
-
MiniCssExtractPlugin.loader必须放在css-loader前面，否则无法导出独立 CSS 文件 -
postcss-loader要紧接在css-loader后、MiniCssExtractPlugin.loader前，否则 PostCSS 规则（如@layer、嵌套）可能被跳过 - 压缩插件要加
parallel: true：否则大量 SCSS 文件时构建慢得明显 - 别手动设
optimization.minimize: false—— 这会直接禁用所有 minimizer，包括CssMinimizerPlugin - 入口 JS 中的
import './a.css'和import './b.css'顺序 = 最终 CSS 规则顺序；浏览器不按文件名或路径排序
Grunt 中 concat 和 cssmin 必须分两步走
grunt-contrib-cssmin 的 files 写法看似能合并，实则只是把每个源文件分别压缩后顺序写入目标文件，完全不管 @import 解析、变量作用域或声明优先级。
- 先用
grunt-contrib-concat显式合并：src: ["src/reset.css", "src/base.css", "src/components/*.css"]，顺序可控 - 再让
cssmin的src指向 concat 输出的临时文件（如dist/all.css），而非原始多个文件 - 若项目需兼容 IE8，
cssmin配置里必须加compatibility: 'ie8'，否则*zoom: 1类 hack 全被删光 - 别设
noAdvanced: true—— 它会误删grid-template-areas等现代语法
Gulp 中 gulp-concat 和 gulp-clean-css 的执行时序很关键
很多人把 gulp-concat 放在 gulp-less 或 gulp-sass 之前，结果拼的是未编译的源码，不是最终 CSS，导致变量未展开、@import 路径失效。
- 顺序必须是：
gulp-sass→gulp-autoprefixer→gulp-concat→gulp-clean-css -
gulp-clean-css默认不处理@import内联，若源 CSS 含@import，得配合clean-css的--skip-imports参数避免重复引入 - 压缩后体积没变小？检查是否漏了
level: { 1: { specialComments: 0 } }—— 否则注释全保留，尤其 license 注释占几百 KB
PostCSS 是跨文件去重压缩的核心环节
单纯拼接再压缩，解决不了重复选择器、冗余 @import、未使用样式等问题。真正有效的合并压缩，必须让 PostCSS 在构建早期就把所有 @import 内联展开，再交由 cssnano 全局分析。
- 装
postcss-import插件，并确保它在cssnano之前执行 -
postcss.config.js必须导出对象，函数式写法在 Webpack 5.70+ 上容易静默失败 - 别在
postcss.config.js里用env === 'production'条件启用cssnano——css-minimizer-webpack-plugin已内置，重复启用会导致规则冲突 - 如果发现伪元素或媒体查询错位，加参数
mergeLonghand: false，避免margin简写破坏原有逻辑
最易被忽略的点：所有构建工具都默认把 @import 当作模块依赖处理，而不是文本拼接。你以为的“合并”，其实是依赖图展开后的线性输出——顺序、作用域、路径解析，全由 loader 和插件链共同决定，不是靠文件列表顺序能控制的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
