【vue3】tailwindcss和element-plus打包后样式覆盖解决方案_tailwindcss 微前端架构 怎么防止重复打包样式类

tailwindcss关闭默认样式

// tailwindcss.config.cjs中加入这段
corePlugins: {
    preflight: false // 关闭默认样式
  }
1
2
3
4

tailwindcss给button基础样式

// tailwindcss.config.cjs中加入这段
plugins: [
    // eslint-disable-next-line func-names
    function ({ addBase }) {
      addBase({
        'ep-button': {
          'background-color': 'var(--ep-color-primary,var(--ep-color-white))'
        }
      })
    }
  ],
1
2
3
4
5
6
7
8
9
10
11

vite.config.js分包时将element-plus动态引入

// vite.config.ts
build:{
rollupOptions：{
	output:{
		manualChunks(id) {
            if (id.includes('element-plus/theme-chalk/')) {
              return 'element-plus'
            }
          },
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13

main.ts中将tailwindcss放置最顶层

甭管啥，往最上面放就完事儿了

// main.ts
import '@/styles/tailwindcss.css'
import { createApp } from 'vue'
import microApp from '@micro-zoe/micro-app'
// 先引入tailwindcss样式后这样不会覆盖element-plus样式

// element-plus中文
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import App from './App.vue'
import registryPinia from '@/store/index'
import '@/styles/common/common.scss' // 自定义全局样式
import '@/styles/element/element-variable.scss'
import 'element-plus/dist/index.css'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这几个方法都试一试，因为我是用了按需导入element-plus，所以tailwindcss打包后还是会覆盖样式，然后就找了各种方法，全怼上去了