按需引入组件库组件 style 文件自动引入

新项目伊始，我想尝试尽量少的依赖组件库，尝试自己去封装项目中用到的组件，但有些复杂的组件还是得依赖成熟的组件库。

只是少量的使用几个组件，我不想全局引入完整组件库，鉴于后续维护，我也不想使用 vite 插件自动引入组件，但是这样的话每次使用组件需要单独引入 css 文件，下面来使用 vite-plugin-style-import 配置 style 文件自动引入。

安装

这里安装的是 2.0.0 版本，使用的组件库是字节的 ArcoDesign

npm i vite-plugin-style-import

配置 vite.config.js

import { createStyleImportPlugin } from "vite-plugin-style-import";

export default defineConfig({
  plugins: [
    createStyleImportPlugin({
      libs: [
        {
          // 这里会匹配组件库包名
          libraryName: "@arco-design/web-vue",
          esModule: true,
          resolveStyle: (name) =>
            // 此处路径需根据不同的组件库灵活修改
            `@arco-design/web-vue/es/${name}/style/css.js`,
        },
      ],
    }),
  ],
});

使用

正常流程结束之后，引入组件

<template>
  <button />
</template>

<script setup>
  import { Button } from "@arco-design/web-vue";
</script>

报错及处理

运行项目，会报错如下：

Error: Cannot find module 'consola'

意思是找不到 consola 这个包，这是 vite-plugin-style-import 这个插件的 bug，后续版本应该会修复，此处可以手动安装 consola

npm i consola -D

再启动就正常运行了。