Exporting CSS in Vue 3/Vite Component Libraries
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
In this blog post, we've learned how to configure a Vue 3/Vite Component Library to export CSS custom properties for selective import by library users. This ensures that users can easily customize the styling of components to fit their project's needs. With the right configuration and export strategy, your component library becomes even more versatile and user-friendly. We hope this guide helps you in creating a powerful and customizable component library for your Vue 3/Vite projects. Happy coding! Read the full article