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

},

},

},

相关推荐
我爱李星璇3 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒7 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员23 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐25 分钟前
前端图像处理(一)
前端
程序猿阿伟32 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒34 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪42 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron