Как правильно задавать пути к шрифтам для vite?

Question

[Сергей Бурдужа]

Всем привет.
Хочу прикрутить сборку vite в wordpress.
В основном работает, но есть проблемы с путями к шрифтам и к картинкам, добавленные через scss.

Главный файл, который подключаю в vite - main.js, в нем подключаю my.scss а уже в нем шрифты.

@font-face {
	font-family: Comfortaa;
	font-display: swap;
	src: url("../fonts/Comfortaa-Bold.woff2") format("woff2"), url("../fonts/Comfortaa-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}

Шрифты находится в src/fonts

vite.config.js

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

// import { chunkSplitPlugin } from "vite-plugin-chunk-split";

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

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

  // config
  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]`,
      },
    },

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

  css: {
    devSourcemap: true,
  },

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

    strictPort: true,
    port: 3000,

    // serve over http
    https: false,
    hmr: {
      host: "localhost",
      //port: 443
    },
  },

  // required for in-browser template compilation
  // https://v3.vuejs.org/guide/installation.html#with-a-bundler
  resolve: {
    alias: {
      // vue: 'vue/dist/vue.esm-bundler.js'
      // "@": path.resolve(__dirname, "src"),
    },
  },
});

И ошибка в браузере.


Загрузил проект на Github

Заранее благодарен.

Comments

[Ankhena]

Девтулз показывает вам где ищет шрифты.
Вы знаете где они лежат на самом деле и какой результирующий путь должен быть.
=> корректируете исходники

[Сергей Бурдужа]

Ankhena, Проблема в конфигурации vite, чтобы шрифты работали в dev и в build.

[Dimox]

Сергей Бурдужа, я нашел решение. В vite.config.js поменять опцию base на такую:

base: process.env.NODE_ENV === "development" ? "/wp-content/themes/THEME_NAME/" : "/wp-content/themes/THEME_NAME/dist/",

[Сергей Бурдужа]

Dimox, Спасибо за ответ, но мне не помогло.
Sorry, поторопился, не работает.

Answer 1

[Сергей Бурдужа]

Нашел решение.
В fonts.scss

@font-face {
  font-family: Inter;
  font-display: swap;
  src: url("/wp-content/themes/bs-base-vite/assets/fonts/Inter-Bold.woff2") format("woff2"),
  url("/wp-content/themes/bs-base-vite/assets/fonts/Inter-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}