Vite Vue 3 library build doesn't implicitly include dist/style.css

Question

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

Lauranlaurance

were you able to make this work? – Sausauce

I haven't been able to make this work. A bounty was offered by a kind soul but no one took it up – Lauranlaurance

Answer 1

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:

• You must ship your .vue files along with your npm package by NOT adding the /src folder to the .npmignore file
• In your host project, import your .vue file directly from your package import YourComponent from 'your-package/src/your-component.vue'
• This approach will not work for anyone who wishes to use the component directly in a browser via the <script> tag, anyone who uses a runtime-only build or build processes which don’t understand what to do with .vue files
• Some components might provide side effects like directives, or extend other libraries with additional functionality
• Manually importing CSS files will never be a bad idea and almost all the Vue packages I know use that approach

Chud