May 18, 2023

Level 6

Laravel 9 Vue2 App Vite Migration Issue loading fonts

Used Laravelshift to create a pull request with Laravel Mix replaced by Vite. It replaced all require with import or most of them, added Vite configuration and so on. But I have had to do more manual updates due to the nature of the applications (Laravel 9 and Vue2). Main issue currently is that fonts do not load properly so have been using variable $fonts like so to load with working path:

- src: url('/assets/fonts/dinpro-regular-webfont.eot');
+ src: url("$fonts/dinpro-regular-webfont.eot");

and this alias in vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import { resolve } from 'path';

export default defineConfig({
    resolve: {
        alias: {
          $fonts: resolve('./public/assets/fonts/')
        }
    },
    plugins: [
        laravel({
            input: [
                'resources/assets/vendor/MediaManager/sass/manager.scss',
...

Does work but forces me to replace many many pathways in sass files. And I still have many errors like

../fonts/bootstrap/glyphicons-halflings-regular.ttf referenced in /Users/user/code/site.com/resources/sass/preview.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

Is there no better way to do this?

LaryAI

2 years ago

Level 58

The issue seems to be related to the way Vite resolves paths. One solution is to use the vite-plugin-legacy plugin to handle legacy assets like fonts. Here's how to use it:

Install the plugin:

npm install vite-plugin-legacy --save-dev

Update your vite.config.js file to include the plugin:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
});

Update your index.html file to include the legacy assets:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="/assets/css/app.css" />
    <!-- Include legacy assets -->
    <script nomodule src="/assets/js/app.legacy.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/assets/js/app.js"></script>
  </body>
</html>

Update your app.js file to import the legacy assets:

import '/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf';

This should resolve the issue with the fonts not loading properly.

1 like

rhand

2 years ago

Level 6

When did that I got

npm run build                            

> build
> vite build

failed to load config from /Users/user/code/site.com/vite.config.js
error during build:
Error: Cannot find module '@vitejs/plugin-legacy'
Require stack:
- /Users/user/code/site.com/vite.config.js

also did do npm add -D terser but no change.

rhand

2 years ago

Level 6

Had to be

...
import legacy from 'vite-plugin-legacy';
...

Now I only get

npm run build

> build
> vite build

error during build:
TypeError: Cannot set properties of undefined (setting 'generateBundle')
    at configResolved (/Users/user/code/site.com/node_modules/vite-plugin-legacy/dist/index.js:40:27)
    at file:///Users/user/code/site.com/node_modules/vite/dist/node/chunks/dep-1889fec9.js:62881:28
    at Array.map (<anonymous>)

rhand

2 years ago

Level 6

I think I simply have to work with better aliases to resolve font-awesome and bootstrap fonts besides our own fonts in Vite config.

We have fonts in public/assets/fonts/vendor/bootstrap-sass/bootstrap/ like:

public/assets/fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot

and in public/assets/fonts/vendor/font-awesome/ like:

public/assets/fonts/vendor/font-awesome/fontawesome-webfont.eot

alias: {
    $fonts: resolve('./public/assets/fonts/')
}

cannot be correct.. only perhaps for our own fonts. And general call for root path would be nice too.

Just need to deal with

vite v3.2.6 building for production...
transforming (219) node_modules/vue-awesome/icons/angle-left.js
/assets/fonts/DINWeb.eot referenced in /Users/user/code/site.com/resources/sass/dashboard.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

/assets/fonts/DINWeb.eot?#iefix referenced in /Users/user/code/site.com/resources/sass/dashboard.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

/assets/fonts/DINWeb-Medium.eot referenced in /Users/user/code/site.com/resources/sass/dashboard.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

/assets/fonts/DINWeb-Medium.eot?#iefix referenced in /Users/user/code/site.com/resources/sass/dashboard.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
...

rhand

2 years ago

Best Answer

Level 6

This seems to work to resolve the paths to fonts in vite.config.js :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import { resolve } from 'path';

const projectRootDir = resolve(__dirname);

export default defineConfig({
    resolve: {
        alias: {
        $fonts: resolve(projectRootDir, "public/assets/fonts"),
...

and then load them like

...
@font-face {
    font-family: 'FontAwesome';
    src: url("$fonts/fontawesome-webfont.eot?v=4.7.0");
    src: url("$fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format('embedded-opentype'), 
    url("$fonts/fontawesome-webfont.woff2?v=4.7.0") format('woff2'), 
...

1 like

Please or to participate in this conversation.