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

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

再建一个scss文件

文件目录如下

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

在style.scss文件里

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

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

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

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

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

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

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

1. module.exports = {
2. css: {
3. loaderOptions: {
4. sass: {
5. additionalData: '@import "@/styles/element/element.scss";'
6. }
7. }
8. }
9. }