基座是Vue3.0 + element plus配合 子應(yīng)用 Vue2.0 + element ui導(dǎo)致的樣式?jīng)_突問題

element-plus默認(rèn)命名空間為el，el會(huì)作為其編譯后的class名及css前綴。支持 自定義命名空間

 首先在App.vue中定義：namespace="ep"；具體代碼如下：

<template>
  <el-config-provider namespace="ep">
    <RouterView />
  </el-config-provider>
</template>

其次設(shè)置 SCSS 和 CSS 變量，創(chuàng)建 /src/assets/styles/element/index.scss, index.scss具體內(nèi)容如下：

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

因?yàn)槲沂褂玫氖?qiankun + vue3.0 + webpack，所以需要在webpack 的 preprocessorOptions 中設(shè)置。找到vite.config.js文件，

preprocessorOptions 中設(shè)置 additionalData: `@use "@/assets/styles/element/index.scss" as *;`,

具體修改內(nèi)容如下：

    css: {
      preprocessorOptions: {
        scss: {
          // 全局注入變量/混合宏（路徑需根據(jù)項(xiàng)目調(diào)整）
          // additionalData: `@import "@/styles/variables.scss";`,
          additionalData: `@use "@/assets/styles/element/index.scss" as *;`,
          // 解決舊版 API 警告（Sass 版本兼容）
          api: 'modern-compiler',
        },
      },

到這里后，還有一點(diǎn)比較坑，我相信很多人也遇到了，就是配置完 依然不起作用，樣式還是亂的，一步一深坑，跟著官方文檔也得踩。其實(shí)答案就在你的main.js里；一般引入 element-plus 時(shí)，我們用的是

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; 

需要注意的是：index.css是編譯壓縮過的，還用這個(gè)樣式就等于沒了，因?yàn)槲覀儞Q了前綴命名，index.css還是默認(rèn) el 的；需要改為引入 import 'element-plus/theme-chalk/src/index.scss'; 

main.js文件修改如下：

//import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/src/index.scss';

然后重新啟動(dòng)項(xiàng)目就??，前人踩坑后人乘涼..........