设置elementplus主题色(全局设置）

首先先在src文件夹下建一个style文件夹，再在style文件夹下面建一个element文件夹

再建一个scss文件

文件目录如下

如果我们要给elementplus设置主题色

在style.scss文件里

首先使用 @forward 导入 Element Plus 的变量，再设置elementplus的主题色

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #1baeae,
    ),
  ),
);

这样我们就完成了组件库主题色的设置，如果我们想在组件里使用它

<style lang="scss" scoped>
@import "@/style/element/custom-element.scss";
</style>

但是如果我们想在整个项目全局使用它

在main.js中使用import语句引入该scss文件即可

import './style/element/style.scss';

我们需要配置vite.config.js文件

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/element/element.scss";'
      }
    }
  }
}