Element Plus SCSS 变量覆盖用法
作者：码农张3
本文主要介绍了Element Plus SCSS 变量覆盖用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
安装依赖
pnpm i sass -D
样式文件
element-plus-vars.scss
// 覆盖变量
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #4080ff,
),
"success": (
"base": #23c343,
),
"warning": (
"base": #ff9a2e,
),
"danger": (
"base": #f76560,
),
"info": (
"base": #a9aeb8,
),
),
$bg-color: (
"page": #f5f8fd,
)
);
// 引入 Element Plus 样式（必须在覆盖变量后）
@use "element-plus/theme-chalk/src/index.scss";
element-plus.scss
/** * element-plus 组件样式覆盖 */ // 变量覆盖(必须在最前面) @use "./element-plus-vars"; // 引入 Element Plus 样式（必须在覆盖变量后） @use "element-plus/theme-chalk/src/index.scss"; ...
导入样式
index.scss
// 重置样式 @use "./reset"; // element-plus @use "./element-plus"; ...
main.js
... // ===== 样式导入 ===== import "@/assets/styles/index.scss"; ...
vite.config.js
...
// 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
...
plugins: [
vue(),
// 自动导入 Element Plus 组件和函数，无需手动 import
AutoImport({
resolvers: [ElementPlusResolver()],
}),
// 自动注册 Element Plus 组件，可在模板中直接使用，采用sass样式配色
Components({
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
],
...
到此这篇关于Element Plus SCSS 变量覆盖用法的文章就介绍到这了,更多相关Element Plus SCSS 变量覆盖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！