vue3+vite中使用自定义element-plus主题配置

小杨梅君2025-08-19 18:09

自定义主题分为两种，一种是 全部导入 另一种是 按需导入 方式

全部导入方式

ps:默认已经安装跟在main.js中配置完毕

新建一个文件存放主题样式element.scss(路径为assets/scss/element.scss)

js 复制代码

// element.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( 
    $colors: ( 
        "primary": (
            "base": #7bb1f5,
        ),
    ),
);
// 这句记得要加
@use "element-plus/theme-chalk/src/index.scss" as *;

重点来了,需要在main.js中把引入的element-plus样式文件替换成自己写的

js 复制代码

// main.js
// 引入element-plus样式文件-------使用了自定义的主题样式这里就不能引入element-plus的样式文件否则不生效
// import 'element-plus/dist/index.css'  
import '@/assets/scss/element.scss'

全部导入方式就搞定了。

按需导入方式

还是上面的那个element.scss文件

js 复制代码

// element.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( 
    $colors: ( 
        "primary": (
            "base": #7bb1f5,
        ),
    ),
);
// 这句要注释掉
// @use "element-plus/theme-chalk/src/index.scss" as *;

重点!!!!需要安装一个包 yarn add unplugin-element-plus --dev

js 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入对应包 
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })], //这里记得需要添加一个配置
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })], //这里记得需要添加一个配置
    }),
    // 按需定制主题配置
    ElementPlus({
        useSource: true,
    }),
  ],
  css: {
    preprocessorOptions: {
        scss: {
            additionalData: `
                @use "@/assets/scss/element.scss" as *;
                `,
            },
        },
    }
})

还有最后一点就是在main.js中把element-plus样式文件引入去掉

js 复制代码

// main.js
// 引入element-plus样式文件-------使用了自定义的主题样式这里就不能引入element-plus的样式文件否则不生效
// import 'element-plus/dist/index.css'

ok了,这就是按需导入的方式。