vue3+element plus使用修改element的主题色问题

最新推荐文章于 2024-04-23 15:49:15 发布
最新推荐文章于 2024-04-23 15:49:15 发布
阅读量825 收藏
点赞数
分类专栏： 前端 html 面试 文章标签： sass vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web19808530489/article/details/123054056
版权

用vue的cli脚手架搭建了一个vue3项目（用的node-sass），使用element plus库，按照饿了么官方文档自定义主题操作后，发现项目报错如下：
在这里插入图片描述
感觉很神奇，当初vue2和element我就是这样类似操作的呀，都可以成功的嘛
解决办法：经过一系列排查后发现，将node-sass换成dark-sass就可以解决问题了。

原因分析

按照报错提示进入到node_modules/element-plus/packages/theme-chalk/input-number.scss文件发现
在这里插入图片描述

最低0.47元/天 解锁文章
web19808530489
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue在线动态切换主题色方案
11-21
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下： 1.添加webpack插件，新建文件webpack/themePlugin.js const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') const config = require('../src/conf
基于element-plus如何更换主题？
qq_40680833的博客
08-19 1320
一个项目中使用了element-plus ui框架，当我们项目需要更换主题的时候项目中的组件如何自动替换主题，以及如何换肤。实现的方法有很多种在这里我简单介绍一下我知道的几种方法。废话不多说请听我继续废话🙈
element-plus切换主题
最新发布
04-23 579
Element Plus 是一款基于 Vue 3 的组件库，它继承了 Element UI 的许多特性，并对其进行了更新和优化以适应 Vue 3。：首先，确保你已经安装了 Element Plus。：Element Plus 提供了多种预设主题，你可以通过 CDN 或者 npm 安装的方式来引入。：在应用的入口文件（如 main.js 或 main.ts）中配置主题。
elementui更改主题颜色
weixin_43959024的博客
12-25 3345
1.用vue-cli安装一个新项目 2.安装elementUI及sass-loader, node-sass // 安装elementUI npm i element-ui -S // 安装sass npm i sass-loader node-sass -D 3.安装elementUI的自定义主题工具 // 首先安装主题工具 npm i element-theme -g // 然后安装c...
elementPlus自定义主题
weixin_43239880的博客
08-09 2719
a.完整导入elementPlusb.自定义主题,在assets下的css中写一个element.scss文件c.安装scss用于解析scss文件d.在main.ts中导入你写的scss文件1.注意这里需要把原来导入element-plus的css文件注释掉2.把自己的样式文件引入进来//引入element-plus相关样式// 引入覆盖的scss样式a.按需导入elementPlusb.自定义主题,在assets下的css中写一个element.scss文件。
【Element Plus 】主题样式自定义
wutiantesi的博客
10-24 5862
Element Plus 主题配置
ElementPlus 自定义主题（Vite4 + Vue3）
qq_39559879的博客
08-08 2072
配置 ElementPlus 主题的时候遇到 SCSS 循环导入的报错，排查后发现是以为在。中引入创建的样式文件（未测试）；如果是按需导入，则需要删除。中引入了两次自定义主题的样式文件，解决方法很简单，去掉。如果不是按需导入，则将 2. 最后一行代码放开，并在。以上代码来自 ElementPlus 官网。下面是配置 ElementPlus 自定义主题的流程。选项下的内容，根据项目采用的插件。中导入自定义样式的代码，并配置。中导入自定义主题的文件即可。，全量导入暂时没有测试。
ElementPlus 修改主题色和暗黑模式切换
gsy445566778899的博客
05-24 8378
本文讲述根本ElementPlus官方教程配置项目的自定义主题色的两种方法和暗黑模式切换；
element plus 主题色替换
flyer9651的博客
12-16 3367
基于Vue3+Element Plus后台管理系统模版源码.zip
10-26
基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element ...
Vue3+Element Plus后台管理系统模版.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
vue3+element-plus+admin
04-12
基于vue3和element-plus组件开发的项目管理平台，包含用户权限设置功能；
基于Vue3 + Element Plus 的后台管理系统
07-22
基于Vue3 + Element Plus 的后台管理系统解决方案 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）...分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
王佳斌
04-11 5781
vue Element 主题色如何更改，vue element-ui修改主题颜色，vue改变elementui的主题色，vue全局修改element-ui的主题颜色，vue项目更改element-ui主题色，vue 全局更改饿了么element组件库主题色，在vue项目中改变element的主题色，vue全局修改element-ui的主题颜色，vue+ElementUI实现动态更换任意主题色，vue element ui 实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vue
element-plus主题配置
sayUonly的博客
03-16 8184
element-plus主题配置 先上官网：主题 本篇文章会讲述，我是如何根据官方教程进行element-plus的主题配置的，以及遇到的坑，和坑的解决方法。 首先，我们需要创建自己的主题文件，/src/styles/element.scss（文件名随意） 根据官网，调整我们的主题： @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( 'primary': ('base': #3A9BFF) ),
vue3 + element plus和vue3 + antdesign的区别
07-08
Vue 3 + Element Plus和Vue 3 + Ant Design是两种常见的Vue 3的UI库组合，它们有以下...总体而言，选择使用Vue 3 + Element Plus还是Vue 3 + Ant Design取决于个人或团队对设计风格、功能需求以及生态系统支持的偏好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值