vue+vite+element-plus修改全局主题颜色

vue3+vite+element-plus修改全局主题颜色

新建修改全局的样式文件
配置vite.config.ts文件
修改APP.vue

最近在研究Vue3+vite+element-plus项目，我想全局改变主题颜色，这样就不用每个文件都去修改一遍了，但是，我看了很多网上修改主题色的文章，明明操作和方法都是一样的，为何我的主题色一直没有效果，终于，功夫不负有心人，直接上图吧！

新建修改全局的样式文件

在src下新建styles/element/index.scss文件，内容如下：

配置vite.config.ts文件

!!!重点

配置样式文件指向，指向我们上一步新建的全局样式文件。注意：additionalData里面的值最后要加一个‘；’（看到有些博客说不加；也会导致样式不生效）
plugins下配置Comonnets，在这之前要安装 unplugin-vue-components 插件

修改APP.vue

！！！！！！！！重点中的重点,一定要加el-config-provider，修改的内容包裹在里面！！！，这边的namespace就是第一点中的重命名，没有重命名的话要写入element默认的‘el’（我之前就是这个原因，真的枯了，后面看到全局修改语言的文章，对比了一下，加上了el-config-provider标签，结果成功了！！！）

最后，因为vite快速构建项目，修改vite.config.ts文件也可以实时的看见效果，但偶尔也会无效，为了确保真的修改成功了，改了vite.config.ts文件后最好npm run dev重新启动一下项目

vue+vite+element-plus修改全局主题颜色相关推荐

elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
python界面颜色设置_pycharm修改界面主题颜色的方法
pycharm修改界面主题颜色的方法更新时间:2019年01月17日 09:53:27 作者:转身及不见今天小编就为大家分享一篇pycharm修改界面主题颜色的方法,具有很好的参考价值,希望对大家 ...
vue.congfig.js配置less全局主题等样式变量
vue.config.js配置less全局主题等样式变量在vue项目中创建vue.config.js文件,写入一下代码 module.exports = {css: {loaderOptions: ...
如何修改VSCode主题颜色
摘自:https://jingyan.baidu.com/article/f25ef2548fe643482d1b826f.html 如何修改VSCode主题颜色听语音原创 | 浏览:24400 ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp
每个公司的主题风格肯定是不一样的,比如现在的公司主题就是#00ab7a.在PC端TO-B的项目中少不了用element-ui,这个时候用element-theme-chalk直接本地编译修改了elem ...
vux 修改设置主题颜色
vux使用的预处理语言是less,使用变量对主题颜色进行管理,所以修改主题需要两步走. 1.在src目录下面创建style/theme.less文件.内容如下 @zPrimaryColor:#0142 ...
vue基于scss的动态切换主题颜色
根据预设的配色方案,在前端动态切换系统主题颜色大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量. ...