I built a library project (Vue 3, Vite) and I want to include it in a host project via package.json
.
But I faced a problem where I can import the components and run a simple programme with those imported components but their styles are gone.
Please let me know what is wrong with my config. It doesn't make sense when I have to manually import css into my host project.
Just to clarify, I don't have any .css
source files in my project. style.css
was compiled from my *.vue
components
This is the vite.config.ts
for my library project. Everything that I need exported is in 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,
}
} )
And this is the relevant part of my 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"
},
...
}
The structure of my dist/
folder after running npm run build
is as follows:
dist/
|-components/
| |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css
You need to manually import your CSS because you are shipping JS and CSS files independently in your package. If you don't want to manually import your CSS, you need to package your SFC files for npm . This is the document for Vue 2, but its idea can totally apply to Vue 3.
Here are some points to note:
.vue
files along with your npm package by NOT adding the /src
folder to the .npmignore
file.vue
file directly from your package import YourComponent from 'your-package/src/your-component.vue'
<script>
tag, anyone who uses a runtime-only build or build processes which don't understand what to do with .vue
files
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.