我构建了一个库项目(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发布于 2022-07-19 03:46:51
您需要手动导入CSS,因为您要在包中独立地传送JS和CSS文件。如果不想手动导入CSS,则需要为npm包装你的证监会文件。这是Vue 2的文档,但它的思想完全可以适用于Vue 3。
以下是一些需要注意的问题:
.vue文件夹添加到.npmignore文件来将您的.npmignore文件与npm包一起发送。.vue导入import YourComponent from 'your-package/src/your-component.vue'文件。<script>标记在浏览器中直接使用组件的任何人,也不适用于使用仅使用运行时才构建或构建不知道如何处理.vue文件的进程。https://stackoverflow.com/questions/72555787
复制相似问题