Vite Vue 3 库构建不隐式包含 dist/style.css

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 Jens van Hellemondt正在寻找一个规范的答案。

我构建了一个库项目（Vue 3，Vite），我想通过package.json将它包含在一个宿主项目中。

但是我遇到了一个问题，我可以导入组件并使用这些导入的组件运行一个简单的程序，但它们的样式已经消失了。

请让我知道我的配置有什么问题。 当我必须手动将 css 导入到我的宿主项目中时，这没有任何意义。

澄清一下，我的项目中没有任何.css源文件。 style.css是从我的*.vue组件编译而来的

---

这是我的图书馆项目的vite.config.ts 。 我需要导出的所有内容都在src/中。

// Library project
import { defineConfig } from "vite"

import vue from "@vitejs/plugin-vue"

import typescript from '@rollup/plugin-typescript';

const path = require("path")
// https://vitejs.dev/config/
export default defineConfig( {
  plugins: [{
    ...typescript( { tsconfig: "./tsconfig.json" } ),
    apply: "build",
    declaration: true,
    declarationDir: "types/",
    rootDir: "/",
  }, vue()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "gsd-vue-egui",
      // fileName: (format) => `gsd-vue-egui.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // Add external deps here
        globals: { vue: "Vue" },
      },
    },
  },
  server: {
    port: 30001,
  }
} )

这是我的package.json的相关部分

{
  "name": "gsd-vue-egui",
  "private": true,
  "version": "0.0.0",

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "npm run test:unit",
    "test:unit": "jest --config=jest.config.js test",
    "lint:css": "stylelint --formatter verbose --config .stylelintrc \".\" --fix",
    "lint:eslint": "eslint --ext js,vue,ts \".\" --fix",
    "lint": "npm run lint:css && npm run lint:eslint"
  },
  ...
}

运行npm run build后我的dist/文件夹的结构如下：

dist/
|-components/
|  |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css

Answer 1

您需要手动导入 CSS，因为您在包中独立地传送 JS 和 CSS 文件。 如果您不想手动导入 CSS，则需要为 npm 打包 SFC 文件。 这是 Vue 2 的文档，但它的想法完全适用于 Vue 3。

这里有几点需要注意：

• 您必须通过不将/src文件夹添加到.npmignore文件来将.vue文件与 npm 包一起提供
• 在你的宿主项目中，直接从你的包中导入你的.vue文件import YourComponent from 'your-package/src/your-component.vue'
• 此方法不适用于希望通过<script>标签直接在浏览器中使用该组件的任何人、使用仅运行时构建或不了解如何处理.vue文件的构建过程的任何人
• 某些组件可能会提供诸如指令之类的副作用，或者使用附加功能扩展其他库
• 手动导入 CSS 文件绝不是一个坏主意，我知道的几乎所有 Vue 包都使用这种方法