postcss插件必须在子应用构建阶段配置，vite子应用推荐postcss-prefix-selector且需置plugins首位并带分隔符前缀，webpack子应用禁用postcss-change-css-prefix，须手动排除@import、@font-face和@keyframes。
PostCSS插件必须作用于子应用构建阶段，而非主应用
PostCSS隔离不是主应用加个配置就能生效的——它只在子应用打包时扫描、重写其内部 CSS 文件的选择器。主应用里装 postcss-prefix-selector 没用，子应用构建产物里的 .btn 还是原样。Vite 子应用需在 vite.config.ts 的 plugins 或 css.postcss 中配置；Webpack 子应用则要在 postcss-loader 的 plugins 数组里显式引入。
Vite子应用用postcss-prefix-selector加前缀最稳
这是目前对 Vite 构建子应用最可靠的做法，因为 experimentalStyleIsolation 在 Vite 下不生效，strictStyleIsolation 又容易导致弹窗样式丢失。关键点：
-
postcss-prefix-selector必须放在postcss.config.js的 plugins 第一位，否则可能被其他插件（如autoprefixer）提前处理掉选择器 - 前缀要带分隔符，例如
.subapp-order-，不能只写subapp-order，否则.subapp-order-button会被错误匹配成.subapp-order .button - 需排除已带命名空间的第三方样式，比如 Element Plus 已配
namespace: 'ep'，就别再给.ep-button加前缀，否则变成.subapp-order-.ep-button，规则失效
Webpack子应用慎用postcss-change-css-prefix
这个插件会全局替换所有匹配到的类名字符串，包括 JS 文件里的 className 字符串和 document.querySelector('.el-input') 中的字面量，风险极高：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 若子应用用了
element-ui/lib的按需引入，JS 里硬编码了'el-button'，插件会把它改成'gp-button'，但组件实际渲染的 DOM 类名仍是el-button，样式完全不生效 - 插件无法识别 SCSS 变量或嵌套结构，
@include el-button-mixin这类调用不会被改写，导致样式漏挂 - 更安全的替代方案：用
css-loader的modules+localIdentName控制类名，再配合 PostCSS 统一加前缀，不碰 JS 字符串
必须手动排除@import、@font-face和@keyframes
PostCSS 插件默认只处理普通选择器，以下三类规则它完全不碰：
-
@import 'normalize.css'—— 被当作外部资源请求，插件不解析内容，结果就是两份normalize.css同时加载，后加载的覆盖前加载的 -
@font-face { font-family: 'iconfont'; src: url('./icon.woff2'); }—— 字体声明全局有效，加前缀毫无意义，且路径若为绝对路径（/fonts/icon.woff2），还会因 publicPath 错配直接 404 -
@keyframes slideIn { from { opacity: 0; } }—— 动画名不加前缀，多个子应用同名动画会互相覆盖，最终只执行最后一个注册的
解决办法：把 normalize.css 和基础字体统一打进主应用；子应用禁用所有 @import，改用 JS 动态 load；@keyframes 名强制加上子应用标识，如 slideIn-subapp-order。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
