Laravel Mix generate fonts into another directory

Question

I'm using laravel-mix which is built on the top of the webpack. I'm facing a problem with fonts directory. For Example, font-awesome package has a scss file and a font directory where all fonts are placed.

font-awesome:.
├───scss
│       fontawesome.scss
└───webfonts
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2

So i place this package in my resources/assets/sass directory.

resources:.
└───asset
    └───sass
        │   main.scss
        │
        └───font-awesome (directory)

main.scss contains code:

@import 'font-awesome/scss/fontawesome';

webpack.mix.js contains:

mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');

All assets are compiled successfully. Now public directory has a css and font directory, which has all fonts like this.

public:.
│   index.php
│
├───css
│       frontend.css
│
├───fonts
│       fa-regular-400.eot
│       fa-regular-400.svg
│       fa-regular-400.ttf
│       fa-regular-400.woff
│       fa-regular-400.woff2

But What I want is, I don't want to compile all fonts into public/fonts directory i want to compile as following structure public/fonts/vendor/font-awesome

public:.
├───css
│       frontend.css
│
└───fonts
    └───vendor
        └───font-awesome
                fa-regular-400.eot
                fa-regular-400.svg
                fa-regular-400.ttf
                fa-regular-400.woff
                fa-regular-400.woff2

What changes that i need to change in webpack.mix.js file.

Answer 1

If you want to use the laravel-mix and try to change public/fonts to public/assets/fonts directory, You can use this code in your webpack.mix.js

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

Answer 2

Try to copy them directly like this:

mix.copyDirectory('assets/font-awesome/webfonts', 'public/fonts');

Or you can copy files one by one:

mix.copy('assets/font-awesome/webfonts/example.ttf', 'public/fonts/example.ttf');