vue3中修改element plus 主题色

vue3中修改element plus 主题色,有两种方式

一、使用 :root 方式设置变量进行覆盖

1.1文件夹 styles 下新建一个 element-variarbles.scss文件

:root {

--el-color-primary: red;

}

1.2 main 文件中引入

import 'element-plus/dist/index.css'

import '@/styles/element-variables.scss'

二、使用 scss 覆盖

2.1 即使用新写的样式,覆盖原有的样式,合并为一个scss文件,引入使用

文件夹 styles 下新建一个 element-variarbles.scss文件

@forward 'element-plus/theme-chalk/src/common/var.scss' with (

$colors: (

'primary': (

'base': red,

),

"success": (

"base": #67C23A,

),

),

);

@use "element-plus/theme-chalk/src/index.scss" as *; // 如果想要引入所有的样式

2.2 vue.config.ts 中引入

css: {

loaderOptions: {

sass: {

additionalData: @use "@/styles/element-variables.scss" as *;

},

},

},

相关推荐
quweiie2 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan201518 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin36 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20182 小时前
Ruby如何采集直播数据源地址
前端·chrome