Vue3 - Element-Plus Config Provider组件修改类名前缀

无恙คิดถึง

已于 2022-11-07 17:49:38 修改

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 elementui

于 2022-11-07 16:29:03 首次发布

本文介绍如何在Vue项目中引入并定制Element Plus组件库样式，包括下载安装、配置全局样式前缀、修改主题颜色等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先进行下载和引入（参照官方）

2、在assets下创建style->element.scss 贴入如下代码（根据自己具体项目创建,需要安装sass）

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'xz' // 自己需要的前缀
);
@import "element-plus/theme-chalk/src/index.scss";

3、vue.config.js 中进行引入配置

css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "./src/assets/style/element.scss";`,  // 引入 2 中配置的文件
      },
    },
  },

4、页面中使用（项目全局配置在App.vue中包裹即可，其他按需包裹）

 <el-config-provider namespace="xz">  
  </el-config-provider>

// namespace 字段配置需要和 2 中相对应

Vue3 - Element-Plus Config Provider组件 修改类名前缀