Question 408520 in Laravel Question posted in
The official Laravel Documentation can be found here.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This does the trick, but it is experimental and feels like a hack. Also I don't know what __assetsPath does and if it exists. Found it in the documentation advanced-base-options.

    experimental: {
    renderBuiltUrl(filename, hostType ) {
        if (hostType === 'js') {
            return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
        } else {
            return { relative: true }
        }
    }
}

  2. 0

    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,
        }),
    ],
    base: './'
});

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search