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

【问题标题】：Vite Vue 3 library build doesn't implicitly include dist/style.cssVite Vue 3 库构建不隐式包含 dist/style.css
【发布时间】：2022-06-10 18:15:43
【问题描述】：

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

【问题讨论】：

标签： javascript typescript vuejs3 vite npm-build

【解决方案1】：

对于es.js，可以使用vite-plugin-libcss自动导入css文件；
对于 umd.js，您可以将build.cssCodeSplit 设置为true 以生成内联样式。

参考：https://github.com/vitejs/vite/issues/1579

【讨论】：