ElementPlus自定义主题

最新推荐文章于 2025-05-11 11:23:01 发布

往复随安

最新推荐文章于 2025-05-11 11:23:01 发布

阅读量656

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/qq_33250049/article/details/140719285

Vite按需引入ElementPlus

按照官网操作没什么问题

安装 element-plus unplugin-vue-components unplugin-auto-import
配置

// vite.config.ts
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'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Vite自定义ElementPlus主题

直接用scss变量覆盖，好处在于可以制定一个主要色，他会自动生成如-light-3 等其他衍生色

新建自定义主题文件

// styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #0906ff,
    ),
    // 其他同理
  )
);

// styles/element/dark.scss
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $colors: (
    'primary': (
      'base': #5b96ff,
    ),
  )
);
// 注意这里要引入dark的样式表
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

修改vite配置

这里官网的例子中只在components中加了{ importStyle: 'sass' }，AutoImport 没加，导致我之前配置一直没生效

// vite.config.ts
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'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;@use "@/styles/element/dark.scss" as dark;`,
      },
    },
  },
})