vite element-plus自定义主题按需导入不生效

>公众号搜索：前端人

1. 使用官方CLI 主题工具编译sass为css文件
   (node版本v10.24.1)

   （1）：全局安装cli工具

npm i element-theme -g

npm i element-theme-chalk -D

    （2）：修改element-variables.scss中的主题变量

     （3）：变量sass为css文件

      

//执行命令
et 

2.复制编译后的theme文件夹到主项目

3.主项目导入所有css文件

import { createApp } from 'vue';
import App from './App.vue';
import './theme/index.css'

createApp(App)
  .mount('#app');

4.修改vite配置

- node 版本切换v17.0.1

//vite.config.ts

import { defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver({
          importStyle: false  //按需导入组件，但是不导入样式文件（sass）
        })],
      }),
      vue(),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData:`@import "./src/theme/scss/global.scss";` // 添加公共样式sass变量(此处为全局sass变量，跟element-plus无关)
        },
      },
    }
  };
});