Laravel Mix not setting font variable when running production build

I have this webpack.mix.js config running:

let mix = require("laravel-mix")

mix.options({
    terser: {
        extractComments: false
    }
})

mix.combine([
    "resources/js/jquery.min.js",
    "resources/js/bootstrap.bundle.min.js",
    "resources/js/simplebar.min.js",
    "resources/js/waves.min.js",
    "resources/js/jquery.waypoints.min.js",
    "resources/js/jquery.counterup.min.js",
    "resources/js/feather.min.js",
    "resources/js/app.min.js",
    "resources/js/custom.js"
], "public/js/app.js")
    .styles([
        "resources/css/app.min.css",
        "resources/css/icons.min.css"
    ], "public/css/app.css")
    .copy("resources/images/favicon.ico", "public/images")
    .copyDirectory("resources/fonts", "public/fonts")
    .copyDirectory("resources/images", "public/images");

When I run production build fonts are not loaded properly because some font variable is not set. Am I doing something wrong, how to fix this?

And yes I am using mix, because it makes much more sense for my use case. I almost do no custom assets, I bought template and using it, I just added some custom JS on top of it.

LaryAI

2 years ago

Level 58

It seems like the issue is that the font variable is not being set properly when running the production build. One possible solution is to manually set the font variable in your webpack.mix.js file.

You can try adding the following code snippet to your webpack.mix.js file:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                            publicPath: '../fonts/'
                        }
                    }
                ]
            }
        ]
    }
});

This code snippet adds a rule to handle font files and uses the file-loader to copy the font files to the appropriate location in the production build.

Make sure to install the file-loader package if you haven't already by running the following command:

npm install file-loader --save-dev

After adding the code snippet and installing the file-loader package, try running the production build again and see if the font variable is set properly.

Let me know if this helps!

Please or to participate in this conversation.