修改element-plus主题色

前提：要安装按需引入和自动导入插件

puppet 复制代码

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

文章目录

修改element-plus主题色
一、安装插件
二、新建一个element的覆盖scss文件
三、配置

一、安装插件

puppet 复制代码

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

具体安装和配置，在第5点

二、新建一个element的覆盖scss文件

@/theme/element-plus-new.scss

puppet 复制代码

// 修改element-plus主题色
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #007d7b,
    ),
    "success": (
      "base": #8bc34a,
    ),
    "warning": (
      "base": #ffc107,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #ff5722,
    ),
    "info": (
      "base": #909399,
    ),
  ),

  $button-padding-horizontal: (
    // "default": 80px
  )
);

三、配置

puppet 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入vue中hook reactive ref等
import Components from 'unplugin-vue-components/vite' //自动导入ui-组件 比如说ant-design-vue  element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 对应组件库引入 ，AntDesignVueResolver

// 配置@别名
import { resolve } from "path"

// https://vitejs.dev/config/
export default defineConfig({

    css: {
      preprocessorOptions: {
        scss: {
          // 自动导入定制化样式进行文件覆盖
          additionalData: `@use "@/theme/element-plus-new.scss" as *;`,
        },
      },
    },
  plugins: [
    vue(),

    //element按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
    }),
    Components({
      resolvers: [
        // 配置elementPlus采用sass样式配置系统
        ElementPlusResolver({importStyle:"sass"})
      ],
    }),
  ],

   // ↓解析配置
   resolve: {
    // ↓路径别名
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

四、查看主题色