Laravel-mix: Define fonts destination

[P9Q]

Hi, Laravel-Mix copies my fonts from:

assets/fonts/sansfont/sans.woff2 to public/fonts/sans.woff2,

Igonres sansfont folder,I want copy to public/fonts/sansfont/sans.woff2

is there any way to define that?

Thank you

//fonts.scss

 @font-face {
    font-family: mySans;
    src:url('../fonts/sansfont/sans.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
  }
  .my-sans {
    font-family: mySans, Arial, Helvetica, sans-serif;
  }

//webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .browserSync({
    proxy: 'localhost:8000'
  });

[ruchern-chong]

https://github.com/JeffreyWay/laravel-mix/blob/5aad0dfde5349e284e0876388a6f307547f7c002/src/builder/webpack-rules.js#L97-L114

The code here already suggests that the fonts will be placed inside fonts/ folder.

[P9Q]

@ruchern, So I should manually edit laravel-mix/src/builder/webpack-rules.js I thought there is an option to define line 103 as an option in webpack.mix.js, anyway thank you _Chong Ru Chern_.

[ruchern-chong]

I guess it's there? I am not too sure why your fonts aren't placed inside the fonts folder.

[P9Q]

Apparently _webpack_ copies all the font files in the /fonts folder regardless grouping them according their names, Sometimes we need to define subfolders in /fonts, for example, /fonts/sans for five different files and weights of Sans fonts etc.

[JeffreyWay]

If you need more control, can you just manually move the font files over? Or, there's also mix.copy() to automate it.

[andrade1379]

Currently I have both Bootstrap and Fontawesome fonts being built to /static/fonts/vendor/bootstrap and /static/fonts/vendor/fontawesome

Using:

.options({
        fileLoaderDirs: {
            fonts: 'static/fonts'
        }
    })

I have a font family within /resources/fonts/font-fam-folder and would also like to have the build place this directory within /static/fonts/vendor/font-fam-folder. Currently the build just moves all font files within the font-fam-folder in /static/fonts/. Is there something that I might have done wrong?

Example of my webpack.mix.js file:

mix.js('resources/js/app.js', 'static/js')
    .sass('resources/scss/app.scss', 'static/css')
    .copy('resources/language', 'static/language')
    .options({
        fileLoaderDirs: {
            fonts: 'static/fonts'
        }
    })
    .webpackConfig({
        plugins: [
            new CopyWebpackPlugin([{
                from: 'resources/images',
                to: 'static/images'
            }]),
            new ImageminPlugin({
                disable: process.env.NODE_ENV !== 'production', // Disable during development
                pngquant: {
                    quality: '95-100',
                },
                test: /\.(jpe?g|png|gif|svg)$/i,
            }),
            new ImageminPlugin({
                maxFileSize: 10000, // Only apply this one to files equal to or under 10kb
                jpegtran: { progressive: false }
            }),
            new ImageminPlugin({
                minFileSize: 10000, // Only apply this one to files over 10kb
                jpegtran: { progressive: true }
            })
        ]
    });

If I try to just .copy() I get the font files in /static/fonts/ as well as /static/fonts/font-fam-folder