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

Question

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'),            
       }
   }
});

Answer 1

I don't have a foolproof answer. However, I couldn't find anything online relating to this issue. Here's my two cents:

In my case I had the same error for one of my Vue component files, however this component didn't have any style tags inside them but still had an associated compiled CSS file from the vite build.

Once I inspected this file, I noticed that there was the following line inside of it @import url("//hello.myfonts.net/count/3edd2b"). This came from one of my SCSS files that I was using at a global level on my application and imported into the app.js entry file.

I suspect the import was not being accessed properly by vite. And if one inspects that URL, an empty response is returned so that could have also contributed to the issue.

In conclusion, by removing that import in the SCSS file, the CSS assets compiled and ran without errors finally.