#componentlibrary

Creating a Vue 3/Vite Component Library is a fantastic way to encapsulate and reuse UI components across multiple projects. However, one common challenge developers face is configuring the library to export CSS that can be imported selectively by users of the library. In this blog post, we'll walk you through the steps to achieve this goal.

Understanding the Problem

You've set up your component library using Github Packages, and you're using minimal CSS along with CSS custom properties to style your components. Additionally, you've tried to minimize the use of scoped styles to keep your CSS modular and reusable. Your library structure looks something like this: src components BasicButton.vue styles components BasicButtonVariables.css index.ts main.ts However, you're facing an issue where the BasicButtonVariables.css file isn't making it into the build dist folder unless you import it in the Vue component style tag. This isn't the behavior you want, and you're looking for a solution to make the CSS custom properties individually importable into other projects based on the component they are using.

Configuring Your Vue 3/Vite Component Library

To achieve the desired behavior, you need to make some configurations in your vite.config.ts file. Here's how you can do it: import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; export default defineConfig({ plugins: , resolve: { alias: { "@/": new URL("./src/", import.meta.url).pathname, }, }, build: { cssCodeSplit: true, target: "esnext", lib: { entry: path.resolve(__dirname, "src/index.ts"), name: "Vue UI", fileName: (format) => `vue-ui.${format}.js`, }, rollupOptions: { external: , output: { globals: { vue: "Vue", }, }, }, }, });

Exporting CSS Custom Properties

Now that you've configured your library, you can export the CSS custom properties from your BasicButtonVariables.css file like this: :root { --primary-button-color: teal; --primary-button-text-color: white; --primary-ghost-button-text-color: black; --accent-button-color: teal; --accent-button-text-color: white; --accent-ghost-button-text-color: black; --button-border-width: .5rem; --button-border-style: solid; --button-border-color: teal; } button.primary:hover { --primary-button-color: tomato; --primary-button-text-color: white; } button.accent:hover { --primary-button-color: tomato; --accent-button-text-color: white; } With these configurations in place, your Vue 3/Vite Component Library will now export CSS custom properties that can be individually imported into other projects depending on the component they are using. This allows for greater flexibility and customization when using your library.

Conclusion