当前位置：首页 > article >正文

element-plus 修改主题色（按需导入）

article 2024/12/28 6:11:09

实现效果：

<el-button type="primary" style="position: absolute; top: 50px; right: 50px;">test --- change primary color
  </el-button>

1. 安装 sass

npm install sass

2. 参照 element-plus 官网新建样式文件：src / styles / element / index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

3. 修改 vite.config.ts 如下：

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

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
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(),
        cesium(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver({importStyle: 'sass'})],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                // 自动导入定制化样式文件进行样式覆盖
                additionalData: `@use "@/styles/element/index.scss" as *;`,
            }
        }
    }
})

4. 重启项目

参考文章：Vue3项目中Element Plus主题色定制（通过scss变量替换方案）_elementplus scss 主题-CSDN博客

查看全文

http://www.kler.cn/a/377750.html