Vue3插件构建后CSS样式不生效问题求助

我正在构建一个Vue3插件，功能正常运行，但CSS样式无法生效。相关代码如下：

ViewerPlugin.ts #

import { App } from "vue";
import MyPlugin from "./components/MyPlugin.vue";

const createViewerPlugin = {
  install(app: App) {
    // 注册全局组件
    app.component("MyPlugin", MyPlugin);
  },
};
export default createViewerPlugin;

vite.config.ts #

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "./src/plugin/ViewerPlugin.ts",
      name: "CreatePlugin",
      fileName: (format) => `create-plugin.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

package.json（部分内容） #

{
  "name": "testplugin",
  "version": "1.0.0",
  "private": true,
  "main": "./dist/create-plugin.umd.js",
  "module": "./dist/create-plugin.es.js",
  "exports": {
    ".": {
      "import": "./dist/create-plugin.es.js",
      "require": "./dist/create-plugin.umd.js"
    },
    "./style": "./dist/style.css"
  },
  "files": [
    "dist"
  ],
  "type": "module"
}

样式写在各个组件的<style scoped>标签内，插件构建完成后dist目录已生成style.css文件，但渲染组件时样式全部丢失，恳请帮忙排查问题。

• 手动引入样式文件：你的package.json已经配置了./style导出项，但插件本身不会自动注入样式，需要在使用插件的项目中手动导入：

  import createViewerPlugin from 'testplugin';
  import 'testplugin/style';
  app.use(createViewerPlugin);
  

• 确认Vite样式提取配置：当前Vite的vue插件默认会将组件内的scoped样式提取到dist/style.css，但可以显式配置css输出路径确保正确性：

  export default defineConfig({
    plugins: [vue()],
    css: {
      output: 'dist/style.css',
    },
    build: {
      // 原有的build配置
    },
  });
  

• 检查scoped样式哈希匹配：Vue的scoped样式会给元素添加唯一哈希类名，打开浏览器开发者工具，对比DOM元素的类名和style.css中的类名是否一致。如果不匹配，可尝试自定义哈希前缀确保唯一性：

  plugins: [vue({
    css: {
      scopedHashPrefix: 'my-plugin-'
    }
  })],
  

• 验证插件使用场景：如果是局部注册组件而非全局使用，同样需要确保样式文件被导入，可在使用组件的文件内直接引入'testplugin/style'。

内容的提问来源于stack exchange，提问作者Joanna