当前位置: 首页 > Web前端 > vue.js

vue-cli3.0+elementui按需自定义主题问题

时间:2023-03-31 22:29:12 vue.js

按需导入成功后,想自定义主题。百度最推荐的方法是生成一个在线主题,然后下载导入。但是一直说下载包有问题,就放弃了。看了很多文章,发现一篇写的很好,解决了这个问题。我会自己记录在这里。1、首先,安装依赖npminstallbabel-plugin-component-D。安装后记得安装sass-loader和node-sass,否则会报错。npminstallnode-sasssass-loader--save-dev2,新建element-variables.scss文件3.在main.ts中引入。注意在elementui引入之后import'./plugins/element.js'import'@a/styles/element-variables.scss'。4.根据需要编辑element-variables.scss文件,这里是一个例子/*主题颜色变量*/$--color-primary:#f0f;/*图标字体路径变量*/$--font-path:'~element-ui/lib/theme-chalk/fonts';/*根据需要导入组件的scss文件和基础scss文件*/@import'~element-ui/packages/theme-chalk/src/base.CSS';@import'~element-ui/packages/theme-chalk/src/rate.scss';@import'~element-ui/packages/theme-chalk/src/button.scss';@import'~element-ui/packages/theme-chalk/src/row.scss';这篇文章的原始链接在这里