无需自定义插件即可实现自动扫描和合并冗余css模块，关键在于规范引入路径并合理配置构建工具：webpack依赖minicssextractplugin结合import语句和splitchunks提取去重；vite则自动合并静态import的css，动态import才分块；未被import的css本就不参与构建，无需扫描。
不需要写自定义插件就能实现自动扫描和合并冗余 CSS 模块。现代构建工具本身已内置机制处理这类问题，关键在于配置方式和引入路径是否规范。
Webpack：靠 MiniCssExtractPlugin + 模块图收口
Webpack 不会主动“扫描”文件系统找 CSS，而是依赖 JS 入口的 import 语句把样式纳入模块图。只要所有 CSS 都通过 import './xxx.css' 引入，MiniCssExtractPlugin 就能统一提取、去重、合并。
- 关掉 style-loader，启用 MiniCssExtractPlugin.loader，否则样式仍嵌在 JS 里
- 确保所有 CSS 文件都被某个 JS 模块 import 过，HTML 中的 不会被识别
- 多个入口（如 main.ts、admin.ts）各自 import 相同 CSS，会生成两份合并结果；若想复用，需将共用样式抽成单独 chunk，用 splitChunks 配置 cacheGroups 显式指定 name 和 filename
- 类名重复不是“冗余模块”，而是 CSS 层叠问题；真正冗余的是未被任何 import 触达的孤立 CSS 文件——这类文件根本不会参与构建，也无需插件扫描
Vite：静态 import 默认合并，动态 import 才分块
Vite 在构建时自动收集所有 静态 import 的 CSS，并按入口打包进单个 CSS 文件（如 main.css）。它不扫描目录，只分析 AST 中的 import 语句。
- import('./a.css') 是动态导入，会生成独立 chunk，不参与主样式合并
- 如果用了别名（如 @/styles/base.css），需确保 vite.config.ts 中 resolve.alias 正确配置，否则路径解析失败导致模块丢失
- Vite 不提供“扫描未引用 CSS”的能力，也没有必要——没被 import 的样式本就不该上线
- 想检查哪些 CSS 实际被包含，可查看 .vite/deps/ 或构建后 dist/assets/ 下输出的 CSS 文件内容
真正需要“扫描”的场景及替代方案
如果你的目标是发现并剔除长期未使用的 CSS 规则（如废弃组件样式），那属于 CSS Purge 范畴，和“合并模块”无关：
- 用 PurgeCSS 或 UnoCSS 的 safelist + content 配置，基于 HTML/JS 中实际出现的类名做裁剪
- PostCSS 插件 postcss-unused-css 可标记未用规则，但无法全自动删除，需人工确认
- Webpack 生态中 css-minimizer-webpack-plugin 默认不删未用规则，需额外配 purgeOptions
不推荐写自定义插件的原因
手动遍历文件系统、解析 import、判断引用关系、重写路径……不仅容易出错，还绕过构建工具的缓存和依赖追踪机制。官方方案已足够健壮：
- Webpack：mini-css-extract-plugin + splitChunks + css-minimizer-webpack-plugin
- Vite：默认行为 + 用 ?inline 参数控制内联，或用 build.rollupOptions.output.manualChunks 拆分公共样式
- 开发阶段保持拆分（便于调试），构建阶段交由工具自动聚合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
