My project is developed using Laravel, Inertia.js with Vue, and Vite for bundling the frontend assets.
Everything seems to be working fine with the application, except when I try to access it from a subdirectory. In this scenario, Vite fails to load the CSS styles defined in the .vue files or components.
This issue results in a blank page being displayed when accessing the URL example.com/subdirectory/login
The browser console displays the following error message:
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
This specific case pertains to me trying to access the Login page/component, but failing to load the Login.a0d488b1.css file due to the missing subdirectory prefix in its path.
I am seeking assistance on resolving this issue. Could you please provide guidance on how to tackle this problem?
The content of my vite.config.js file is as follows:
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/js/**', 'resources/sass/**'],
config: { delay: 300 }
}],
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'ziggy': path.resolve('vendor/tightenco/ziggy/dist'),
'ziggy-vue' : path.resolve('vendor/tightenco/ziggy/src/js/vue'),
}
}
});