element-plus + vite 按需引入 并自定义主题

之前在element-plus1.2的时候, 折腾过按需引入和自定义主题, 没成功, 现在正式发布了, 终于成功了

鉴于官方文档还是不够傻瓜, 也是费了点力气才弄好, 于是分享一下 element-plus版本 2.0.2 vue 3.2.25 vite 2.8.0

1 自动按需引入组件

按照官方文档进行操作即可

2 自定义主题

官方文档 我是通过设置scss变量来自定义的主题

首先新建scss文件 我的路径是src/style/element.scss

在新建的文件中放入以下代码

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green
    )
  )
);

然后修改vite.config.ts的两个位置, 如下图

就可以了

代码

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/style/element.scss" as *;`
      }
    }
  },
 plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    })
  ],

注意把路径改为你自定义的路径

这样就可以了