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

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

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

再建一个scss文件

文件目录如下

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

在style.scss文件里

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

@forward "element-plus/theme-chalk/src/***mon/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";'
      }
    }
  }
}

转载请说明出处内容投诉
CSS教程_站长资源网 » 设置elementplus主题色(全局设置)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买