vite-plugin-style-import自动引入element-plus样式

vite-plugin-style-import是一款Vite插件，它可以帮助我们在使用element-plus组件库时，自动引入组件的样式。下面是具体的操作步骤：

1.安装vite-plugin-style-import

npm install vite-plugin-style-import -D

2.在vite.config.js中添加插件配置

// vite.config.ts
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'

export default {
  plugins: [
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
  ]
};

3.安装consola

配置完后会有一个缺少模块的报错Cannot find module 'consola' ，按照提示进行安装

npm install consola -D

当我们在组件中使用ElButton时，插件会自动引入element-plus的样式文件，无需手动引入。