Vite is not loading CSS codes that are inside of VUE components

[mahbubahmed]

My application is built with Laravel, and Inertia.js with Vue. I am using Vite to bundle the frontend files.

Generally, the application works fine, however, when I put the application inside a subdirectory, Vite does not load the CSS codes that are inside the .vue files or components.

As a result, it shows a blank page when I visit the page URL example.com/subdirectory/login

The browser console shows the following:

Uncaught (in promise) Error: Unable to preload CSS for /build/assets/Login.a0d488b1.css d http://example.com/subdirectory/build/assets/app.6486bb89.js:1

In this case, I am trying to visit the Login page/component. However, it is failing to load the Login.a0d488b1.css file because it is missing the subdirectory name at the beginning of its path.

Could you please tell me how to solve this problem?

My vite.config.js file looks like the following:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
   plugins: [
       laravel({
           input : [
               // 'resources/sass/app.scss',
               'resources/js/app.js',

               // website
               'resources/sass/website/theme.scss',
               'resources/js/website/main.js',

               
           ],
           refresh: [{
               //paths: ['resources/**'],
               paths: ['resources/js/**', 'resources/sass/**'],
               config: { delay: 300 }
           }],
       }),    
       
       vue({
           template: {
               transformAssetUrls: {
                   base: null,
                   includeAbsolute: false,
               },
           },
       }),
   ],
   resolve: {
       alias: {
           // '@': '/resources/js',
           'ziggy': path.resolve('vendor/tightenco/ziggy/dist'),
           'ziggy-vue' : path.resolve('vendor/tightenco/ziggy/src/js/vue'),            
       }
   }
});