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 *;

},

},

},

相关推荐
IT_陈寒3 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start20 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied28 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖29 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A34 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER35 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父39 分钟前
前端速通—CSS篇
前端·css
pixle042 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端