CSSを含めてVueコンポーネントをビルドする

経緯

ViteでビルドしたVueコンポーネントを、Vueアプリにnpmライブラリとしてimportし、使用した際にVueコンポーネントに設定したCSSが反映されていなかった。

SmpleComponentプロジェクト

SmpleComponent.vue

 <!-- SmpleComponentにCSSを設定 -->
<template>
    <div class='sample' /> 
</template>

<style>
.sample {
    background : black;
}
</style>

index.ts

export default {
    install(app: App, options = {}) {
        app.use(vuetify);
        app.component('SmpleComponent', SmpleComponent);
    }
}

import先のVueアプリ

// 自作したSampleComponentをnpmライプラリとしてimportする
import { SampleComponent } from '@lib-sample-parts'
import { createApp, h } from 'vue';

const app = createApp();

app.use(SampleComponent);
app.mount('#app');

<template>
    <!-- SmpleComponentに設定していたCSSが反映されない -->
  <SampleComponent />
</template>

解決策

vite-plugin-css-injected-by-jsを使うと
Viteビルドの成果物のjsにcssを挿入するコードを含めることができる

導入方法

install

$ # npm
$ npm i vite-plugin-css-injected-by-js --save-dev
$ # pnpm 
$ pnpm add vite-plugin-css-injected-by-js -D
$ # npm
$ yarn add vite-plugin-css-injected-by-js -D

vite.config.ts

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
    plugins: [
        vue(),
        cssInjectedByJsPlugin(),
    ]
});