ElementPlus自定义主题

Vite按需引入ElementPlus

按照官网操作没什么问题

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

// 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 等其他衍生色

1. 新建自定义主题文件

// 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 *;

1. 修改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;`,
      },
    },
  },
})