elementPlus修改主题的两种方式

使用项目中，经常要使用到自定义主题颜色，有些在配置中会与到一些问题，这里根据之前遇到的一些问题，教大家更快的修改elementPlus主题。

使用全局引入

1. 添加element-variables.scss文件

$--colors: (
  "primary": (
    "base": #f4364c,
  ),
);

@forward "element-plus/theme-chalk/src/common/var.scss" with
  (
    $colors: $--colors,
    $date-editor:("daterange-width": 260px,),
  );
@use "element-plus/theme-chalk/src/index.scss" as *;

2. main.js引入

# main.js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';

import 'element-plus/dist/index.css';
import './styles/element-variables.scss';

createApp(App).use(router).use(ElementPlus)
  .mount('#app');

按需引入

1. 添加element-variables.scss文件

$--colors: (
  "primary": (
    "base": #f4364c,
  ),
);

@forward "element-plus/theme-chalk/src/common/var.scss" with
  (
    $colors: $--colors,
    $date-editor:("daterange-width": 260px,),
  );

2. vite.config.js配置

• 下载unplugin-vue-components

npm install unplugin-vue-components --dev

• 使用

// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default ({ mode }) => defineConfig({
  plugins: [
    vue(),
    // AutoImport({
    //   resolvers: [ElementPlusResolver()],
    // }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass',
      })],
    }),
  ],
  css: {
    preprocessorOptions: {
      // 引入公用的样式
      scss: {
        additionalData: '@use "@/styles/common.scss";@use "@/styles/element-variables.scss";',
      },
    },
  },
})

问题

如果common.scss, 用公用的变量，不能使用时，或者报错的情况，可以修改成@use "@/styles/common.scss" as *;