Vue3 + Element Plus 自定义主题（自动引入）

最近在搭建一个基础项目模板方便后面新项目快捷开发，也是用了最新的vue3+Element Plus，在配置自定义主题的时候遇到了不少问题。

官方文档指南 https://element-plus.gitee.io/zh-CN/guide/theming.html

1.按照官方文档在 /src/assets/styles/element/ 下新建自定义主题scss文件index.scss

// /assets/styles/element/index.scss
$--colors: (
  "primary": (
    "base": #52c41a,
  ),
  "success": (
    "base": #52c41a,
  ),
  "warning": (
    "base": #faad14,
  ),
  "danger": (
    "base": #f5222d,
  ),
  "error": (
    "base": #f5222d,
  ),
  "info": (
    "base": #42b8dd,
  ),
);

// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with
  (
    // do not use same name, it will override.
    $colors: $--colors,
  );

// if you want to import all
 @use "element-plus/theme-chalk/src/index.scss" as *;

// You can comment it to hide debug info.
// @debug $--colors;

2./src/assets/styles/下新建index.scss【引入reset.css】

// reset.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

3.vue.config.js中新增配置

const path = require("path");
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        "@/": `${path.resolve(__dirname, "src")}/`,
      },
    },
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/element/index.scss" as *;`,
      },
    },
  },
});

4.main.js中删除默认引入的element css

// 自定义主题
// import "element-plus/dist/index.css";
import "@/assets/styles/index.scss";
import ElementPlus from "element-plus";

实现效果：