vite vue 3库构建不暗中包含dist/style.css

Question

我构建了一个库项目（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"
  },
  ...
}

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

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，则需要将您的SFC文件打包用于NPM 。这是VUE 2的文档，但其想法可以完全适用于VUE 3。

请注意：

• 您必须通过不添加 .vue 文件以及NPM软件包。 >/src 文件夹 .npmignore
• 在主机项目中的文件，直接从软件包直接导入您的 .vue 文件 package/src/your-component.vue'
• 此方法将不适用于希望通过＆lt; script＆gt; 标记直接在浏览器中使用该组件的任何人，仅运行时构建或构建过程，这些过程不了解如何使用 .vue 文件
• 某些组件可能会提供副作用，例如指令，或扩展其他库，并使用
• 手动导入CSS文件的其他功能，永远不会是坏主意和我知道使用的几乎所有VUE软件包