Vue3项目中Element Plus主题色定制（通过scss变量替换方案）

最新推荐文章于 2025-03-20 09:20:27 发布

听海边涛声

最新推荐文章于 2025-03-20 09:20:27 发布

阅读量8.4k

点赞数 11

文章标签： scss 前端 css Vue3

本文链接：https://blog.csdn.net/panghuangang/article/details/139064402

版权

Element Plus官方解释：
https://element-plus.org/zh-CN/guide/theming.html#%E9%80%9A%E8%BF%87-scss-%E5%8F%98%E9%87%8F

如果通过scss变量替换方案来定制Element Plus主题色，按照如下步骤：

安装sass：使用命令npm install sass -D
准备定制样式文件：在项目下面新增文件styles/element/index.scss
对Element Plus样式进行覆盖：通知Element Plus采用scss语言，再导入定制的scss文件覆盖

安装sass

执行npm i sass -D：
在这里插入图片描述

准备定制化的样式文件

在项目styles目录下面创建一个目录element，然后在element目录下面新建一个index.scss文件：
在这里插入图片描述

index.scss文件的内容：

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
            'base': #27ba9b,
        ),
        'success': ( // 成功色
            'base': #1dc779,
        ),
        'warning': ( // 警告色
            'base': #ffb302,
        ),
        'danger': ( // 危险色
            'base': #e26237,
        ),
        'error': ( // 错误色
            'base': #cf4444,
        ),
    ))

自动导入配置

配置Element Plus采用saas配色系统

将vite.config.js文件中的Components修改为如下形式：

   Components({
      resolvers: [
        // 配置Element Plus采用saas样式配色系统
        ElementPlusResolver({ importStyle: 'sass' }),
      ],
    })

自动导入定制化样式文件进行样式覆盖

将下面这段代码放入vite.config.js文件中：

  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }

修改后的vite.config.js文件为：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// Element Plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 配置Element Plus采用saas样式配色系统
        ElementPlusResolver({ importStyle: 'sass' }),
      ],
    }),
  ],
  resolve: {
    // 实际的路径转换 将@ 转换为./src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

修改配置后，执行npm run dev重启，primary按钮的主题色修改为绿色了：
在这里插入图片描述