0
点赞
收藏
分享

微信扫一扫

vue3+vite+element-plus创建项目,修改主题色

老北京的热干面 2023-06-18 阅读 52

element-plus按需引入,修改项目的主题色

根据官方文档安装依赖

​npm install -D unplugin-vue-components unplugin-auto-import

vite.config.js配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

新建一个文修改全局样式的文件

在src下新建styles/element/index.scss文件,内容如下:

配置vite.config.js文件 

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // 配置elementPlus采用sass样式配置系统
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  css:{
    preprocessorOptions:{
      scss:{
        // 自动导入定制化样式进行文件覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `
      }
    },
   
  }
})

配置完之后,找个按钮验证一下,我这里的主题色是绿色,主要按钮是绿色就可以了

 

 注意:

有个需要注意的地方,按需导入的只要是js引用的都需要手动导入样式,比如essage组件,在页面需要手动引入,这样引入之后就没有问题了

import 'element-plus/theme-chalk/el-message.css'
import { ElMessage } from 'element-plus'
举报

相关推荐

0 条评论