Laravel-mix: How do i remove versioning from font files

[dkesberg]

• Laravel Mix Version: 4.0.14
• Node Version: v6.11.3
• NPM Version: 3.10.10

Description:

I want to remove the versioning from the font files, because we have a client who can't see the glyphs and FontAwesome recommends to not verion the font files (See this issue: https://github.com/FortAwesome/Font-Awesome/issues/3286)

Mix file:

I only used the copyDirectory because it was suggested as a fix for the versioning but my font files still get versioned.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    };
});

mix.copyDirectory('resources/fonts/fontawesome-pro', 'public/fonts');
mix.copyDirectory('resources/images', 'public/images');

mix.js('resources/js/app.js', 'public/js');

mix.sass('resources/sass/app.scss', 'public/css');

I'm grateful for any pointers as i know this is not a real "issue". I tried hard to search but my google-fu failed me and maybe someone more experienced knows where i have to look.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kfortuin]

I know this is very old, but did you ever get this fixed?

[dkesberg]

@kfortuin
Try to use the "processCssUrls"" option. I have used it in a different project to prevent relative paths being changed to absolute paths and my result file doesnt seem to have versioning.

mix.options({ processCssUrls: false })

[gtempesta]

If you have absolute URLs you can turn off URL processing altogether with

.options({ // Do not process URLs anymore
  processCssUrls: false
});

But that's not my case, so I investigated futher and by looking into the source code of Laravel Mix I have found the code that manages fonts, which is in src/builder/webpack-rules.js, line 50, where the comment says // Add support for loading fonts.

Laravel Mix has a method called webpackConfig where you can specify rules to be merged with default ones. I have rewritten the code replacing Config.fileLoaderDirs.fonts with its value which is simply 'fonts' and removing the hash part. It worked and Google Lighthouse is not complaining anymore.

In my Mix file I have added:

.webpackConfig({
  // object will be merged with Laravel Mix config, so matching rules will be overwritten
  module: {
    rules: [{
      // overwriting file-loader rule for fonts in order to remove the hash (so we can pre-load without downloading it twice)
      test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
      loaders: [{
        loader: 'file-loader',
        options: {
          name: (path) => {
            if (!/node_modules|bower_components/.test(path)) {
              return 'fonts/[name].[ext]';
            }
            const pathUpdated = path.replace(/\\/g, '/').replace(/((.*(node_modules|bower_components))|fonts|font|assets)\//g, '');
            return `fonts/vendor/${pathUpdated}`;
          },
        },
      }],
    }],
  },
})

to the webpack method.

[s00d]

My worked version

Mix.listen('configReady', function(config) {
    const rules = config.module.rules;
    for (let rule of rules) {
        if (rule.test.toString() == /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/.toString()) {
            rule.options.name = (link) => {
                if (!/node_modules|bower_components/.test(link)) {
                    return path.join(mix.config.fileLoaderDirs.fonts, '/[name].[ext]');
                }
                const pathUpdated = link.replace(/\\/g, '/').replace(/((.*(node_modules|bower_components))|fonts|font|assets)\//g, '');
                return `fonts/vendor/${pathUpdated}`;
            }
            break;
        }
    }
});

[dreamyCode]

i had the same problem. this fixed it:

 Mix.version([
        "public/fonts/myFont.woff"
    ]);

reding the docs actually helped.