首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vite Vue 3库构建不隐式包含dist/style.css

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

Stack Overflow用户
提问于 2022-06-09 06:45:08
回答 1查看 2.3K关注 0票数 7

我构建了一个库项目(Vue 3,Vite),我希望通过package.json将它包含在主机项目中。

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

请让我知道我的配置有什么问题。当我必须手动将css导入我的主机项目时,这是没有意义的。

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

这是我的库项目的vite.config.ts。我需要导出的所有东西都在src/中。

代码语言:javascript
运行
复制
// 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的相关部分

代码语言:javascript
运行
复制
{
  "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文件夹的结构如下:

代码语言:javascript
运行
复制
dist/
|-components/
|  |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css
EN

回答 1

Stack Overflow用户

发布于 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文件的进程。
  • 一些组件可能提供诸如指令之类的副作用,或者扩展其他具有附加功能的库。
  • 手动导入CSS文件不会是个坏主意,我知道的几乎所有Vue包都使用这种方法
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72555787

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档