使用Vue 3 + Element Plus开发新项目时,因为要引入的公共组件是Vue 2 + Element UI实现的。同一个项目中既有Element UI,又有Element Plus,会造成CSS冲突。
官方给出的解决方案是给Element Plus修改命名空间,如:原来的都是el-开头,我们可以改成ep-开头。
- 使用
ElConfigProvider
包装您的根组件
<!-- App.vue -->
<template>
<el-config-provider namespace="ep">
<!-- ... -->
</el-config-provider>
</template>
- 在src目录下创建
styles/element/index.scss
// styles/element/index.scss
// we can add this to custom namespace, default is 'el'
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
$namespace: 'ep'
);
// ...
- 在
vite.config.ts
中导入styles/element/index.scss
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
// ...
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
// ...
})
完全按照教程在全新的项目中试验会发现虽然类名都变成ep-开头了,但是element 源码中的类依然是el-
原因:
- 官方教程中使用了~别名,如果你在vite / webpack中没有配置~别名,自定义命名空间就不会生效
- 如果是全部导入,需要在
styles/element/index.scss
中引入Element源码
// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
$namespace: "ep"
);
@use "element-plus/theme-chalk/src/index.scss" as *;
注意:如果是按需导入组件,需要使用ElementPlusResolver,具体配置参考官方模版
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
]
})
发表回复