Include 3rd party scss in component library using Vue 3 + Vite - vuejs3

Question

I'm currently building an external component library using Vue 3 + Vite. I'm using 3rd party component and style, but the style doesn't apply when I used it in my main project. It used to work before when I use Vue 2 + Vue CLI.
My component library project looks like this:
and here's the detail for my code
vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/main.js'),
name: 'custom-lib',
fileName: 'custom-lib',
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
})
package.json
{
"name": "custom-lib",
"private": true,
"version": "0.0.0",
"type": "module",
"files": [
"dist"
],
"main": "./dist/custom-lib.umd.cjs",
"module": "./dist/custom-lib.js",
"exports": {
".": {
"import": "./dist/custom-lib.js",
"require": "./dist/custom-lib.umd.cjs"
}
},
"scripts": {
"build": "vite build"
},
"dependencies": {
"moment": "^2.29.4",
"vue": "^3.2.41",
"vue-datepicker-next": "^1.0.2"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.2.0",
"sass": "^1.56.0",
"sass-loader": "^13.1.0",
"vite": "^3.2.3"
}
}
src/components/Datepicker.vue
<template>
<DatePicker
:id="id"
v-model:value="inputVal"
value-type="date"
type="date"
:format="dateFormat"
:placeholder="dateFormat"
:disabled="disabled"
input-class="mx-input"
/>
</template>
<script>
import DatePicker from 'vue-datepicker-next';
import moment from 'moment';
export default {
name: 'Datepicker',
components: {
DatePicker
},
props: {
id: {
type: String,
required: true
},
modelValue: null,
dateFormat: String,
disabled: Boolean
},
computed: {
inputVal: {
get() {
if (this.modelValue) {
return moment(this.modelValue).toDate();
}
return null;
},
set(val) {
let strVal = undefined;
let m = moment(val);
if (m.isValid()) {
strVal = m.format("YYYY-MM-DDTHH:mm:ss");
}
this.$emit('update:modelValue', strVal);
}
}
}
};
</script>
<style lang="scss">
#import "vue-datepicker-next/scss/index.scss";
</style>
src/main.js
import Datepicker from './components/Datepicker.vue';
export {
Datepicker
}
My Datepicker style not working in my main project, is there something missing from the config?

Answer 1

As I was suggesting in comment, you can use vite-plugin-css-injected-by-js
Add the plugin to your component project:
npm i vite-plugin-css-injected-by-js --save
Add the plugin to vite config of your custom component:
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' // 👈
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
cssInjectedByJsPlugin() // 👈
],
build: {
lib: {
entry: resolve(__dirname, 'src/main.js'),
name: 'custom-lib',
fileName: 'custom-lib',
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
})
It should work without hassle.
See it on Stackblitz:
you can go in test folder (cd test) and run yarn dev to launch the preview.
preview:
https://stackblitz.com/edit/vitejs-vite-yd1rzw
Result: