CSS not working in Vue3 - Vite Project

[Uhasith]

I did configure this on app.js and vite.config.js but CSS not working.

import VueEasyLightbox from "vue-easy-lightbox";

const meta = document.createElement("meta");
meta.name = "naive-ui-style";
document.head.appendChild(meta);

const appName = import.meta.env.APP_NAME || 'Laravel';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(naive)
            .use(ZiggyVue)
            .use(pinia)
            .use(i18nVue, {
                resolve: async (lang) => {
                    const langs = import.meta.glob("../../lang/*.json");
                    return await langs[`../../lang/${lang}.json`]();
                },
            })
            .use(VueApexCharts)
            .use(VueEasyLightbox)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "vue-easy-lightbox":
                "vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js",
        },
    },
    optimizeDeps: {
        exclude: ["js-big-decimal"],
    },
});

[kodzop]

I have the same problem. Don't know how to fix it yet.

EDIT: To fix it, remove the resolve.alias 'vue-easy-lightbox': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' in vite.config.js, and add @import to your scss file @import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox';

[XiongAmao]

I have the same problem. Don't know how to fix it yet.

EDIT: To fix it, remove the resolve.alias 'vue-easy-lightbox': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' in vite.config.js, and add @import to your scss file @import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox';

@Uhasith

If you are using external-css build, remove the resolve.alias 'vue-easy-lightbox': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js' in vite.config.js. And put this in main.js/app.js :

// for external-build
import vue-easy-lightbox from 'vue-easy-lightbox/external-css'

import 'vue-easy-lightbox/external-css/vue-easy-lightbox.css'

// or add @import in your style file 
// @import 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox';