vue3+vite配置elementPlus主题需要安装一下两个插件:

  1. unplugin-vue-components
  2. unplugin-auto-import

开始配置:
第一步、安装插件

pnpm install -D unplugin-vue-components unplugin-auto-import
// 我这里使用pnpm安装,当然大家如果没有配置安装pnpm可以使用npm/cnpm

第二步、配置插件(在vite.config.ts中)

...
/* 自定义elementPlus插件 start */
import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
/* 自定义elementPlus插件 end */

...

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    })
  ],

  ...
  
  css: {
    preprocessorOptions: {
      scss: {
        // 一下路径就是我们需要新定义主体的scss文件路径名称
        additionalData: `@use "src/styles/common.scss" as *;`
      }
    }
  },

第三步、自定义主体样式
在src目录中创建styles文件夹,新建common.scss文件,写自己的样式。

//固定写法
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'success': (
      'base': #29cca0
    )
  )
);

官网scss写法文档:
https://element-plus.org/zh-CN/guide/theming.html


张旭超
1.4k 声望222 粉丝

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2