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

这篇具有很好参考价值的文章主要介绍了设置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文件文章来源地址https://www.toymoban.com/news/detail-512777.html

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

到了这里,关于设置elementplus主题色(全局设置)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nodejs安装及环境变量配置(修改全局安装依赖工具包和缓存文件夹及npm镜像源)

    本机环境:win11家庭中文版 一、官网下载  二、安装              三、查看nodejs及npm版本号 1、查看node版本号 2、查看NPM版本号(安装nodejs时已自动安装npm)  四、配置npm全局下载工具包和缓存目录 1、查看安装目录  在本目录下创建node_global和node_cache目录,以后通过npm安装

    2024年02月14日
    浏览(51)
  • 怎么设置文件夹密码?文件夹密码设置方法合集

    为文件夹设置密码可以有效地保护文件夹的数据安全,那么该怎么设置文件夹密码呢?下面我们来一起了解一下。 想要简单快捷的为文件夹设置密码,那么, 文件夹保护3000 就是最佳的选择。它提供了3种文件夹保护方式,通过“加密码”就可以快速的为文件夹设置密码。 为

    2024年02月14日
    浏览(47)
  • 用局域网共享访问权限设置软件、共享文件夹设置密码软件保护共享文件安全

    当前,很多企事业单位的局域网都配置了文件服务器,用于共享单位的一些文件供局域网用户访问。同时,员工工作当中形成的劳动成果、重要文件等也常常存储在文件服务器上,便于文件保存、协同工作等需要。这使得,企业局域网文件服务器的文件安全管理日渐重要,如

    2024年02月08日
    浏览(54)
  • element如何动态切换主题(vite+vue+ts+elementPlus)

    提示:动态切换主题使用的是css3的var函数现实 示例:切换--main-bg-color的值,使用div style=\\\"--main-bg-color:red\\\" /div 那么当前标签下的所有节点使用到当前变量的都会发生变化  通过浏览器检查,发现element ui库的变量 提示: 众所周知css是从上往下执行,如果我们可以在hand标签里最后一

    2023年04月08日
    浏览(35)
  • vue-elementPlus自动按需导入和主题定制

    elementPlus自动按需导入 装包 - 配置 1. 装包(主包和两个插件包)  2. 配置 在 vite.config.js 文件中配置,配置完重启( npm run dev ) 主题定制 装包sass - 主题样式定制文件 - 配置 1. 装包sass npm i sass -D (注:-D表示仅在开发环境中依赖) 2. 准备主题定制文件 置于 styles/element/inde

    2024年02月09日
    浏览(32)
  • ubuntu设置共享文件夹

    实现linux与ubuntu下文件的互通 1.打开虚拟机的共享文件夹 2.查看ubuntu是否能识别到共享文件夹 ls /mnt/hgfs

    2024年02月08日
    浏览(56)
  • Windows共享文件夹设置

    注: 1、文件夹共享端(Server)一定要与文件夹接受端(Client)为同一局域网内,并且可以Ping同; 2、Windows高级共享设置针对使用网络设置“网络发现”(以下图Windows11 为例) 1.2.1 如果需要任何人可以连接就是加“Everyone”   1.2.2 将添加用户的权限修改为“读取/写入”,点

    2024年02月06日
    浏览(98)
  • 电脑文件夹加密怎么做?6步教你设置文件夹密码

    有时候,我们电脑里有些文件或者文件夹的内容不想要别人看到,这个时候需要我们对它加密,这样才能更好地保护你的隐私。电脑文件夹加密怎么做?密码设置后,想要解除该怎么做?以及操作过程中,文件夹里面的文件误删怎么办? 下面就来介绍下有关设置文件夹密码的

    2023年04月08日
    浏览(74)
  • Windows:设置右键用RStudio打开文件和文件夹

    在使用RStudio写R脚本的时候总是要先打开它,再通过它打开脚本和文件夹,感觉不是很方便。由于VSCode以及其他软件都可以整合到右键菜单中打开文件或文件夹,因此就折腾了一下怎么在右键中使用RStudio打开文件,下面是效果展示以及设置步骤,最后是参考链接。 右键选择文

    2024年02月06日
    浏览(80)
  • idea 将文件夹设置为模块

    添加普通文件夹到工作区后,显示的不是项目模块module,此时需要手动设置为项目module。 普通文件夹样式如下,没有小蓝色块标识。 Project Structure--Modules,点击上面\\\"+\\\"号,Import Model,选择所要导入为Model的文件夹。 注意:不是所有文件夹都可以模块化的,idea会根据自己内部的扫

    2024年02月11日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包