【vue3】elementPlus主题色定制

news2024/11/13 15:18:07

以scss语言为例

1、element-plus自动按需导入配置，可参考官网按需导入模块
在这里插入图片描述
安装element-plus及辅助插件

npm i element-plus --save

安装辅助插件

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

安装sass

npm i sass -D

2、vite.config.js 中配置

// vite.config.ts
import { defineConfig } from 'vite'
//element-plus按需导入
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: [
  vue(),
    // element-plus按需配置
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: 
      //1、配置elementPlus采用sass样式配色系统
      [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  resolve:{
alias:{
'@':fileURLToPath(new URL('./src',import.meta.url))
}
},
css:{
preprocessorOptions:{
scss:{
//2、自动导入定制化样式文件进行样式覆盖
additionalData:`@use "@/styles/element-plus/index.scss" as *`
}
}

}
})

styles文件夹下新增element文件夹，新增index
.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with(
$colors:(
'primary':(
    //主色
    'base':#27ba9b
),
'success':(
    //成功色
    'base':#1dc729
),
'warning':(
    //警告色
    'base':#ffb302
),
'danger':(
    //危险色
    'base':#e26237
),
)
);