[SOLVED] Relative path or subdirectory with Laravel 11 vite

Relative path or subdirectory with Laravel 11 vite

In Laravel 11 with vite I am loading a font in my .scss file:

src:url("../fonts/my-font.eot");

Vite build this into this css:

src:url(/build/assets/my-font.eot);

How can I tell vite to create relative URLs like:

src:url(./my-font.eot);

Absolute path would be fine to, if I could add my subdirectory /my-app. root and publicDir option have no effect. Maybe laravel plugin overwrites this?

I searched through the manual and tried a lot of options without success.

Solution

First run npm update to get a somewhat new version. It does not work for older version like laravel-vite-plugin 0.7.1, vite 3.2.5. But it does with (still old) laravel-vite-plugin 0.7.8, vite 3.2.11.

Now adding base: './' in the Vite config file should work and the resulting build files should use relative instead of absolute file path.

Vite config file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    // Relative path
    base: './',
    // Absolute path
    // base: '/subfolder/build',
});

But if wish to have absolute path with subdirectroy you can then simply specify base: 'subfolder/build' and resulting build files will have absolute paths (for e.g.): /subfolder/build/assets/filename.css