arco design按需导入报错排查思路与解决方案解析

 "@arco-design/web-vue": "^2.43.2",
 "vite-plugin-style-import": "^2.0.0"

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createStyleImportPlugin } from "vite-plugin-style-import";
export default defineConfig({
  server:{
    host:"0.0.0.0",
  },
  plugins: [
    vue(),
    createStyleImportPlugin({
      libs: [
        {
          libraryName: "@arco-design/web-vue",
          esModule: true,
          resolveStyle: (name) => {
            // less
            return `@arco-design/web-vue/es/${name}/style/index.js`;
          },
        },
      ],
    }),
  ],
});

   createStyleImportPlugin({
      libs: [
        {
          libraryName: "@arco-design/web-vue",
          esModule: true,
          resolveStyle: (name) => {
            console.log("resolveStyle===>",name)
            // less
            return `@arco-design/web-vue/es/${name}/style/index.js`;
          },
        },
      ],
    }),

import { existsSync } from "node:fs";
import { join } from "node:path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createStyleImportPlugin } from "vite-plugin-style-import";
// 获取arco样式路径
function getArcoStylePath(name) {
  const names = name.split("-");
  const path = `@arco-design/web-vue/es/${name}/style/index.js`;
  if (existsSync(join(__dirname, "./node_modules/" + path))) {
    return path;
  } else {
    names.pop()
    return getArcoStylePath(names.join("-")) || ""
  }
}
export default defineConfig({
  server: {
    host: "0.0.0.0",
  },
  plugins: [
    vue(),
    createStyleImportPlugin({
      libs: [
        {
          libraryName: "@arco-design/web-vue",
          esModule: true,
          resolveStyle: (name) => {
            // less
            return getArcoStylePath(name);;
          },
        },
      ],
    }),
  ],
});