element-plus使用自定义主题色

创建一个scss文件

我这里就叫 element.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (

    // 在这里的定义自己想要的颜色

    "primary": (
      // 主色
      "base": #ff6699, 
    ),
    "success": (
      // 成功色
      "base": #1dc779,
    ),
    "warning": (
      // 警告色
      "base": #39c0bd,
    ),
    "danger": (
      // 危险色
      "base": #e26237,
    ),
    "error": (
      // 错误色
      "base": #cf4444,
    ),
  )
);

2.vite.config.js内配置相关

  // 导入自定义主题色
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/element.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // 自动引入elementui插件配置
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
  ],