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

},

},

},

相关推荐
扉川川1 分钟前
File和Blob对象的区别
javascript
Mintopia2 分钟前
在 Next.js 中接入 Google Analytics 与 PostHog —— 一场“数据偷窥”的艺术演出
前端·javascript·next.js
遂心_2 分钟前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
月亮慢慢圆4 分钟前
Web Animation API
前端
Mintopia4 分钟前
AIGC驱动的Web界面设计:技术逻辑与用户体验平衡
前端·javascript·aigc
盏茶作酒297 分钟前
浅拷贝和深拷贝
前端·javascript
在掘金801107 分钟前
pm2 程序 windows开机启动管理设置
前端
徐_三岁8 分钟前
深入理解 svh、lvh、dvh—— 移动端视口高度解决方案
前端·css
昔人'16 分钟前
css`min()` 、`max()`、 `clamp()`
前端·css
鹏多多26 分钟前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js