(3)Vue项目中Element-Plus主题色的设置（实战不讲原理）

胚芽鞘681

已于 2025-03-22 19:07:46 修改

阅读量407

点赞数 5

分类专栏： Vue 文章标签：开发语言 elementui

于 2025-03-22 19:05:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_73968447/article/details/146444572

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

第一步cmd安装依赖

提示如果你还没有配置Element-plus请看我的文章（2）在vue3项目集成elementPlus-优快云博客

在项目根目录下打开cmd或idea自带的cmd

例子我的

D:\study\VueProject\zwy

依次执行下面的四个命令

npm i sass@1.79.0 -D

npm i unplugin-auto-import -D

npm i unplugin-element-plus -D

npm i unplugin-vue-components -D

第二步在目录src/assets/ 下添加index.scss文件

内容如下

@forward "element-plus/theme-chalk/src/common/var.scss" with (

  $colors: (

    "primary": ("base": #0066bc),

    "success": ("base": #008f00),

    "warning": ("base": #ffad00),

    "danger": ("base": #e52f2f),

    "info": ("base": #691d9a),

  )

);

第三步修改vite.config.js

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



import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import ElementPlus from 'unplugin-element-plus/vite'



// https://vite.dev/config/

export default defineConfig({

  plugins: [

    vue(),

      //按需定制主题色配置

      ElementPlus({

        useSource: true,

      }),

      AutoImport({

        resolvers: [ElementPlusResolver( {importStyle:'sass'})],

      }),

      Components({

        resolvers: [ElementPlusResolver({importStyle:'sass'})],

      }),



    vueDevTools(),

  ],



  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    },

  },css: {

    preprocessorOptions: {

      scss: {

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

        additionalData:`

        @use "@/assets/index.scss" as *;

        ` ,



      },



    }

  }

})

第四步检验主题色修改是否成功

运行项目打开链接

修改前