postcss 本身不支持按需加载，需依赖插件（如 postcss-import、autoprefixer）和构建工具（webpack/vite）协同实现按需生成或注入；常见问题包括 import 全量展开、purgecss 路径遗漏、插件未安装、sourcemap 冲突等。
PostCSS 本身不支持按需加载，得靠插件和构建工具配合
PostCSS 是个解析器和转换管道，它自己不会分析你用了哪些 CSS 类、组件或属性，更不会自动删掉没用的样式。所谓“按需加载”，本质是「按需生成」或「按需注入」，必须借助额外插件（如 postcss-import、postcss-preset-env）和构建工具（Webpack/Vite）的模块机制来实现。
常见错误现象：postcss-import 默认会把所有 @import 同步展开，哪怕某个 .css 文件只在某个动态路由里用到，也会被打包进主包；或者用了 tailwindcss 的 @layer 但没配 content 路径，导致 PurgeCSS 类没被识别剔除。
- 使用场景：组件级 CSS（如 Vue 单文件组件里的
<style></style>）、微前端子应用样式隔离、多主题切换时只加载当前主题 -
postcss-import要配合resolve配置才能处理别名路径，否则@import "@/styles/vars.css"会报Cannot find module - Vite 下推荐用原生
import+?inline（如import style from './foo.css?inline'），再传给postcss.process()，比纯 PostCSS 插件链更可控
Webpack 中用 postcss-loader 实现 CSS 拆分与条件注入
Webpack 的 mini-css-extract-plugin 负责把 CSS 提取成独立文件，而 postcss-loader 负责在提取前做转换。两者顺序不能错：必须是 postcss-loader → css-loader → MiniCssExtractPlugin.loader，否则 @apply 或 @tailwind 可能失效。
容易踩的坑：postcss-loader 的 sourceMap 设为 true 但 devtool 是 eval，会导致 Chrome 里断点跳转错乱；或者 postcss.config.js 里写了 plugins: [require('autoprefixer')]，却忘了在 package.json 里装 autoprefixer，构建时报 Cannot find module 'autoprefixer'。
- 参数差异：Webpack 5+ 中
postcss-loader默认启用postcss8，若项目还在用 PostCSS 7 插件（如老版cssnano），要降级 loader 或升级插件 - 性能影响：开启
cacheDirectory可提速 20%~40%，尤其在大型项目中；但 CI 环境若未清理缓存，可能命中旧结果 - 示例配置片段：
use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: ['autoprefixer'] } } } ]
Vite 下更轻量的按需方案：利用 import.meta.glob + postcss.process
Vite 原生支持 import.meta.glob 动态导入 CSS，结合 postcss.process() 可以在运行时对特定 CSS 字符串做转换（比如注入变量、补全前缀），再用 document.styleSheets 注入——这才是真正意义的「按需加载」，连打包时都不包含。
典型问题：直接 import('./theme-dark.css') 会触发完整构建流程，而 import.meta.glob('./themes/*.css', { eager: false }) 才返回懒加载函数；另外，postcss.process() 返回的是 Promise，必须 await，否则 result.css 是 undefined。
- 使用场景：暗黑模式切换、A/B 测试不同 UI 样式、低配设备加载精简版 CSS
- 兼容性注意：Node.js 端跑 PostCSS（如 SSR）需确保
postcss和插件版本一致，Vite 的ssr: true模式下默认不走postcss.config.js，得手动传config对象 - 简短示例：
const themes = import.meta.glob('./themes/*.css', { as: 'raw' }); const darkCSS = await themes['./themes/dark.css'](); const result = await postcss([require('autoprefixer')]).process(darkCSS, { from: undefined }); document.head.appendChild(Object.assign(document.createElement('style'), { textContent: result.css }));
按需 ≠ 删除 unused，Tailwind 的 purge 配置最容易漏掉路径
Tailwind 的 content 字段不是“扫描范围”，而是“源码特征提取入口”。如果写成 content: ['./src/**/*.{js,ts}'] 却忘了加 .vue 或 .svelte，那么组件里写的 class="bg-blue-500" 就不会被识别，最终生成的 CSS 里压根没有 bg-blue-500 对应规则。
另一个高发问题：用 postcss-nested 写嵌套语法时，若父选择器是动态拼接的（如 &.${prefix}-btn），PurgeCSS 无法静态分析，会误删整个块——这不是 PostCSS 的锅，是 PurgeCSS 的能力边界。
- 真实路径示例：
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']，注意.html也要列出来，否则 HTML 模板里的 class 不生效 - 性能提示：开启
safeList比正则匹配快，尤其含大量动态 class 名时；['bg-*', 'text-*']这种通配写法会保留全部 bg/text 工具类，体积激增 - 调试技巧：临时把
purge: { enabled: false }，再对比构建后 CSS 文件大小，能快速定位是否删过头
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
