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

},

},

},

相关推荐
空山新雨(大队长)9 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术44 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java1 小时前
CSS的文本样式
前端·css
前端小趴菜051 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术1 小时前
理解 CSS 浮动技术
前端·css
索迪迈科技1 小时前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作1 小时前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3