Element Plus SCSS 变量覆盖用法

程序员张32026-01-21 9:33

安装依赖

powershell 复制代码

pnpm i sass -D

样式文件

element-plus-vars.scss

css 复制代码

// 覆盖变量
@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

css 复制代码

/**
 * element-plus 组件样式覆盖
 */
// 变量覆盖(必须在最前面)
@use "./element-plus-vars";
// 引入 Element Plus 样式（必须在覆盖变量后）
@use "element-plus/theme-chalk/src/index.scss";
...

导入样式

index.scss

css 复制代码

// 重置样式
@use "./reset";

// element-plus
@use "./element-plus";
...

main.js

javascript 复制代码

...
// ===== 样式导入 =====
import "@/assets/styles/index.scss";
...

vite.config.js

javascript 复制代码

...
// 自动导入
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" })],
    }),
  ],  
...