scss命名空间配置必须在编译时注入，运行时无法修改；所有类名前缀、变量重映射均发生在构建阶段，产出css后即固定，js无法批量更改已编译类名。
SCSS 命名空间配置必须在编译时注入，运行时改不了
SCSS 本身不提供运行时作用域隔离能力，所有类名前缀、变量重映射、mixin 重导出都发生在构建阶段。一旦 CSS 文件产出，el-button 就是 el-button，再也没法靠 JS 把它批量改成 ep-button。所以关键动作必须落在构建配置里，而不是子应用启动后。
常见错误现象：在 main.ts 里调用 app.use(ElementPlus, { namespace: 'ep' }) 后发现样式没变——这是因为该配置只影响组件渲染时的 class 名生成，**不影响已编译好的 theme-chalk CSS 文件**。那部分还是原始的 .el-button。
- Vue3 + Element Plus 必须同步做两件事：① 初始化传
namespace；② 重编译 SCSS 主题文件，把$namespace变量透进去 - Vite 项目需在
vite.config.ts的css.preprocessorOptions.scss.additionalData中注入全局变量，确保每个.scss文件都能读到$namespace: 'ep' - Webpack 项目对应配置
sass-loader.additionalData，且要确认css-loader的modules.mode不是'pure'（否则 scoped 类名不会哈希）
重编译 Element Plus 主题必须用 @forward + with 语法
直接在 main.ts 或 App.vue 里 @import 'element-plus/theme-chalk/src/button.scss' 是无效的——它不会读取你设的 $namespace，因为变量作用域没透下去。正确路径是新建一个入口 SCSS 文件，用 @forward 显式转发并覆写变量。
示例文件 src/styles/element_plus.scss：
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ( $namespace: 'ep' ); @use 'element-plus/theme-chalk/src/index.scss';
这个写法才能让整个主题链路（包括 button、input、dialog 等所有组件的 SCSS）都基于新命名空间生成 CSS。漏掉 @forward 这一步，$namespace 就只在当前文件生效，下游组件仍用默认 el- 前缀。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
第三方 UI 库（如 Bootstrap）不能只加 class 前缀
给 加 class="bootstrap-iso" 完全没用。Bootstrap 编译出的 CSS 规则里压根没有 .bootstrap-iso .btn 这种嵌套结构，浏览器根本不会匹配。真正有效的是用 Sass 源码重编译：
.bootstrap-iso {
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
// ... 其他模块
}
这样生成的 CSS 才会把所有规则包裹在 .bootstrap-iso 下。但注意：Bootstrap 的 JS 组件（如 Modal、Dropdown）默认只认 .modal、.dropdown-menu，必须显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal'))。
SCSS 隔离失效的三个高发点
即使配置了命名空间，以下情况仍会导致样式泄漏或未生效：
-
@import嵌套的 CSS 文件（如@import './reset.css'）不会被 SCSS 编译器处理，里面的button { margin: 0 }仍是全局污染源 - 子应用用了
style="color: red"内联样式——SCSS 管不到运行时字符串拼接 - 主应用提前加载了
normalize.css或reset.css，子应用的button样式仍会被它重置，因为这类基础样式优先级高、无命名空间
最易被忽略的是：SCSS 命名空间只解决「自己写的样式」，对任何外部引入的 CSS（<link rel="stylesheet">、@import url(...)、CDN 加载）完全无效。这些必须转为本地 SCSS 导入并重编译，或者用运行时劫持方案兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
