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

1、先进行下载和引入(参照官方)

https://element-plus.gitee.io/zh-CN/guide/installation.html

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中包裹即可,其他按需包裹)

   
  

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

你可能感兴趣的:(vue.js,javascript,前端,elementui)