element-plus 自动引入修改主题色-阿里云开发者社区

element-plus 自动引入修改主题色

2023-08-02 1573

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： element-plus 自动引入修改主题色

vue3出来了，想尝鲜首先想到的依然是element。

一上来就遇到如何自定义主题色的问题。

element-plus官网给了两个示例，完整引入的和手动引入的，唯独缺了自动引入的。

整了好些天才整出来一个解决方法供大家参考，避免踩坑。

安装依赖

# sass
npm install -D sass
# element-plus官方文档中自动引入所需的两个依赖
npm install -D unplugin-vue-components unplugin-auto-import

打包工具

我使用的是vite，此处依然是以vite配置为例

开始

第一步、照着element-plus官网给的方法配置自动引入

附上官网地址element-plus按需导入官网示例

// 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 {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

第二步、配置自定义主题

依然附上官网地址element-plus修改主题色官网示例

增加了一个预处理样式的配置，以及导入时读取预处理配置

// vite.config.js
import path from "path";
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      // 配置资源路径
      "@/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自定义的主题色
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // 自动引入
    AutoImport({
      resolvers: [ElementPlusResolver({
        // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
        importStyle: "sass",
      })],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        // 自动引入修改主题色添加这一行，使用预处理样式
        importStyle: "sass",
      })],
    })
  ],
});

附上我的样式：

// @/styles/element/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #3F9A12,
    ),
    "success": (
      "base": #67C23A,
    ),
    "warning": (
      "base": #E6A23C,
    ),
    "danger": (
      "base": #F56C6C,
    ),
    "error": (
      "base": #F56C6C,
    ),
    "info": (
      "base": #909399,
    ),
  ),
  $button-padding-horizontal: (
    "default": 80px
  )
);