SCSS本身不提供运行时隔离，所有隔离必须在编译或加载阶段补足；@import/@use引入含CSS规则的全局文件（如reset.scss）会导致样式逃逸，是微前端中最常被忽略的漏点。
SCSS 本身不提供运行时隔离能力，所有隔离必须在编译阶段或加载阶段补足；直接用 @import 或 @use 引入全局 SCSS 文件（如 variables.scss、reset.scss）会导致样式逃逸，这是最常被忽略的漏点。
SCSS 编译产物如何被微前端框架识别为“可隔离”
微前端框架（如 qiankun、garfish）只对最终生成的 CSS 字节流做劫持和重写，它完全不关心你用没用 SCSS。关键在于：编译后的 CSS 是否含全局选择器、是否带前缀、是否被正确注入到子应用容器内。
- Webpack + sass-loader：确保
css-loader开启modules: { auto: true }，且只对.module.scss生效；普通.scss文件仍会输出全局类名 - Vite：默认不处理
.scss模块化，需显式配置css.modules.localIdentName并配合 PostCSS 插件（如postcss-prefix-selector）在构建时加前缀 - 若子应用用了
@import 'element-plus/theme-chalk/src/base.scss'，该文件里所有.el-button都是全局的——必须改用命名空间版，例如通过@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'app-a')
为什么 @use 和 @import 在子应用里很危险
@use 和 @import 是 SCSS 的编译期指令，它们把目标文件内容“展开”进当前文件，一旦目标文件含 .btn { margin: 0 } 这类规则，就等于直接往最终 CSS 里塞了全局样式——隔离机制对此完全无感。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 常见错误：子应用
index.scss中@use '@/styles/reset.scss'，而reset.scss里写了body { font-size: 16px }→ 主应用 body 被强制重置 - 安全做法：所有跨子应用共享的 SCSS 片段（变量、函数、mixin）必须不含任何 CSS 规则；样式规则只允许出现在模块化文件（如
Button.module.scss）中 - 第三方库的 SCSS 主题文件（如 Ant Design 的
index.less）必须走 ConfigProvider + prefixCls，不能直接@import
PostCSS 插件加前缀不是万能的
像 postcss-prefix-selector 这类插件只能处理静态选择器，对动态拼接、CSS-in-JS、:global() 声明、@keyframes 和 @font-face 全部失效。
立即学习“前端免费学习笔记（深入）”；
- SCSS 中写
:global(.el-icon) { display: inline-block }→ 前缀插件跳过，图标消失 -
@keyframes slideIn { from { opacity: 0; } }→ 编译后仍是全局动画名，可能被主应用同名动画覆盖 - 构建产物中若存在
link rel="stylesheet" href="/theme.css"，该 CSS 文件不会被 PostCSS 处理，也不会被微前端运行时重写 - 解决办法：把所有
@keyframes改为 JS 动画，或用postcss-animation-name-prefix单独处理；@font-face必须在子应用初始化时动态注入到 shadowRoot 或 scoped 容器内
真正难的不是让 SCSS 编译出带前缀的类名，而是确保所有样式入口都被纳入同一套约束——包括第三方库的 SCSS 主题、build 产出的 link 标签路径、运行时动态插入的 style 标签，以及开发时 IDE 自动 import 的非模块化文件。这些地方只要漏一个，隔离就形同虚设。
