Vite+Vue3+ElementPlus 改变主题配色

1、安装elementPlus，并按需导入

npm install element-plus --save

安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts


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。就可以安装用于按需导入 element-plus 样式的 unplugin-element-plus 插件并进行配置

npm i unplugin-element-plus -D

// 自动按需导入 element-plus 样式
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        })
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
      })
    ],
    }),
    ElementPlus({
      useSource: true,
    }),
  ],
})

 在ElementPlusResolver({ importStyle: 'sass' })，需要importStyle配置样式引入方式，不然自定义主题无效。

2、创建一个新的styles文件夹，新建index.scss，直接覆盖 Element Plus 样式变量：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors:(
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #17A7FF, // 修改primary base color
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $font-size:(
    'extra-large': 20px,
    'large': 18px,
    'medium': 16px,
    'base': 14px,
    'small': 13px,
    'extra-small': 12px,
  )
);

3、在vite.config.ts中引入

export default defineConfig({
  // ...

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/index.scss" as *;`,
      },
    },
  },
})

这里需要配置@，如果没有配置@会报错。

重新运行项目即可。