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

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

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

2、在assets下创建style->element.scss 贴入如下代码(根据自己具体项目创建)

@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 中相对应

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容