Wrong path to fonts and images in scss?

[seriiserii825]

Hi.
I have a problem with fonts path and also for images added throw background-image path in dev mode.
For build it's ok.

I am using vite in wordpress.
inc.vite.php

// enqueue hook
add_action('wp_enqueue_scripts', function () {

  if (defined('IS_VITE_DEVELOPMENT') && IS_VITE_DEVELOPMENT === true) {

    // insert hmr into head for live reload
    function vite_head_module_hook()
    {
      echo '<script type="module" crossorigin src="http://localhost:3000/main.js"></script>';
    }
    add_action('wp_head', 'vite_head_module_hook');
  } else {
    wp_enqueue_style('main', get_template_directory_uri() . '/dist/main.css');
    wp_enqueue_script('main', get_template_directory_uri() . '/dist/main.js', [], null, true);
  }
});

vite.config.js

import { defineConfig } from "vite";
import liveReload from "vite-plugin-live-reload";
import vue from "@vitejs/plugin-vue";

const { resolve } = require("path");
const fs = require("fs");
const path = require("path");

export default defineConfig({
    plugins: [
        vue(),
        liveReload(__dirname + "/**/*.php"),
    ],

    root: "",
    base: process.env.NODE_ENV === "development" ? "/" : "/dist/",

    build: {
        // output dir for production build
        outDir: resolve(__dirname, "./dist"),
        emptyOutDir: true,

        // emit manifest so PHP can find the hashed files
        // manifest: true,
        manifest: false,

        // esbuild target
        target: "es2018",

        // our entry
        rollupOptions: {
            input: {
                main: resolve(__dirname + "/main.js"),
            },

            output: {
                entryFileNames: `[name].js`,
                chunkFileNames: `[name].js`,
                assetFileNames: `[name].[ext]`,
                // manualChunks: {
                //     vendor: ["vue", "pinia"],
                // },
            },
        },

        // minifying switch
        minify: true,
        write: true,
    },

    css: {
        devSourcemap: true,
    },

    server: {
        // required to load scripts from custom host
        cors: true,

        // we need a strict port to match on PHP side
        // change freely, but update in your functions.php to match the same port
        strictPort: true,
        port: 3000,

        // serve over http
        https: false,

        hmr: {
            host: "localhost",
            //port: 443
        },
    },
});

And i have error in dev mode yarn dev

GET http://bs-altuofianco-shop.local/fonts/Comfortaa-Bold.woff2 net::ERR_ABORTED 404 (Not Found)

[andrefelipe]

Sorry I wouldn't be able to solve your case, but take a look at this:
https://github.com/andrefelipe/vite-php-setup#known-issue-2-during-dev-only

Also for Wordpress I have a class here:
https://github.com/wp-bond/bond/blob/master/src/Tooling/Vite.php
and it's usage here:
https://github.com/wp-bond/boilerplate/tree/master/themes/boilerplate (see the vite.config.js)
maybe this can give some idea too regarding on when I solved the dist path, and the local symlink