stevegoddard14's avatar

Vite and Fontawesome - Files not being Copied to Public

I've just migrated by Laravel project from Mix to Vite. I'm using Homestead (on Windows 11) and the project uses fontawesome-free v6.

The issue I have is that the webfonts are not copied to public/build/webfonts when I run npm run build. I get the following errors:

	vagrant@homestead:~/hermes2/laravel$ npm run build

	> build
	> vite build

	vite v4.4.11 building for production...
	transforming (26) node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
	../webfonts/fa-brands-400.woff2 referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

	../webfonts/fa-regular-400.woff2 referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

	../webfonts/fa-solid-900.woff2 referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

	../webfonts/fa-brands-400.ttf referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

	../webfonts/fa-regular-400.ttf referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

	../webfonts/fa-solid-900.ttf referenced in /home/vagrant/hermes2/laravel/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
	✓ 62 modules transformed.
	public/build/manifest.json              0.26 kB │ gzip:  0.14 kB
	public/build/assets/app-391ebb59.css  348.77 kB │ gzip: 58.53 kB
	public/build/assets/app-21dac67c.js   223.24 kB │ gzip: 60.81 kB
	✓ built in 15.08s
	vagrant@homestead:~/hermes2/laravel$

If I manually copy the webfonts directory from node_modules@fortawesome\fontawesome-free to public\build everything works fine and I have the fonts in my project. I'd be on with this if it was just once. However, whenever I run npm run build the build folder is cleared and I have to copy them back it. This gets frustrating very quick!

Any suggestions?

My package.json file:

"@fortawesome/fontawesome-free": "^6.4.0",

My vite.config.js file:

export default defineConfig({
    plugins: [
        laravel([
            // 'resources/css/app.css',
            'resources/sass/app.scss',
            'resources/js/app.js',
        ]),
    ],
    server: {
        host: "192.168.10.10",
        watch: {
            usePolling: true,
        },
    },
});

My app.scss file: (in part)

	//Font awesome free.
	@import '@fortawesome/fontawesome-free/scss/brands';
	@import '@fortawesome/fontawesome-free/scss/fontawesome';
	@import '@fortawesome/fontawesome-free/scss/regular';
	@import '@fortawesome/fontawesome-free/scss/solid';

Thanks, Steve

0 likes
9 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

The issue you're facing is that the webfonts are not being copied to the public/build/webfonts directory when you run npm run build with Vite. To resolve this, you can manually configure Vite to copy the webfonts to the desired location during the build process.

Here's how you can do it:

  1. Install the copy package as a dev dependency by running the following command in your project directory:

    npm install --save-dev copy

  2. In your vite.config.js file, import the copy function from the copy package:

    import { defineConfig } from 'vite';
import copy from 'copy';

  3. Add a build property to your vite.config.js file and configure the onEnd hook to copy the webfonts to the desired location:

    export default defineConfig({
    // ...existing configuration...
    build: {
        // ...existing build configuration...
        onEnd: () => {
            copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/build/webfonts', (err) => {
                if (err) {
                    console.error(err);
                } else {
                    console.log('Webfonts copied successfully!');
                }
            });
        },
    },
});

  4. Save the vite.config.js file.

Now, when you run npm run build, Vite will copy the webfonts from node_modules/@fortawesome/fontawesome-free/webfonts to public/build/webfonts after the build process is complete.

Note: Make sure the paths specified in the copy function match the actual paths of the webfonts in your project.

Let me know if you have any further questions!

stevegoddard14's avatar

@LaryAI I like the idea - but the copy command does not appear to be triggered. I'm getting no feedback in the console o say it's worked or it's failed. Is the syntax correct?

tangtang's avatar

@stevegoddard14 may you try this method

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

export default defineConfig({
  plugins: [
    laravel([
      'resources/sass/app.scss',
      'resources/js/app.js',
    ]),
  ],
  server: {
    host: '192.168.10.10',
    watch: {
      usePolling: true,
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
  // Add custom asset handling for FontAwesome webfonts
  assetsDir: 'assets', // The directory name where assets are placed
  assetsInlineLimit: 4096, // Adjust as needed

  // Add a rule to copy webfonts from FontAwesome to the assets directory
  rollupOptions: {
    output: {
      manualChunks: undefined,
      assetFileNames: 'webfonts/[name][ext]', // Adjust the output directory as needed
    },
  },
});

it will do the manual step like this issue If I manually copy the webfonts directory from node_modules@fortawesome\fontawesome-free to public\build everything works fine and I have the fonts in my project. I'd be on with this if it was just once. However, whenever I run npm run build the build folder is cleared and I have to copy them back it every you do a npm run build, but you not need to copy it manually again. it will do it automatically.

stevegoddard14's avatar

Thanks @tangtang - but I failed to get this working as well. After much googling - I realised that it was simply not finding the webfonts dir in the place it was looking.

I manually copied the webfonts dir from /node_modules/@fontawesome/fontawesome-free to /resources and job done! Vite found the files and copied them to public/build/assets - and versioned them. The app seems happy now.

Kortez12's avatar

Try to import fontawesome like this and then run npm run build

@import '/node_modules/@fortawesome/fontawesome-free/css/brands.min.css';
@import '/node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css';
@import '/node_modules/@fortawesome/fontawesome-free/css/regular.min.css';
@import '/node_modules/@fortawesome/fontawesome-free/css/solid.min.css';
stevegoddard14's avatar

@Kortez12 Just tried this - it made no difference to the problem. Still needed he webfonts dir in the resources folder.

MrMoto9000's avatar

Adding this to app.scss (or whatever file you might use) fixed it to me. Thanks!

$fa-font-path: "@fortawesome/fontawesome-free/webfonts/";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular"; 
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
2 likes

Please or to participate in this conversation.