Laravel Mix/Webpack isn't resolving my fonts dependencies.

I'm trying to bundling some assets with Laravel Mix but i seems like webpack is not resolving the font files referenced in my assets. I'm missing an option?

This is what i have


/*Master css */
mix.styles([
    'node_modules/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css',
    'node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css',
    'node_modules/gentelella/vendors/nprogress/nprogress.css',
    'node_modules/gentelella/vendors/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css',
    'node_modules/gentelella/build/css/custom.min.css',
], 'public/css/master.css');

/*Master js */
mix.scripts([
    'node_modules/gentelella/vendors/jquery/dist/jquery.min.js',
    'node_modules/gentelella/vendors/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/gentelella/vendors/fastclick/lib/fastclick.js',
    'node_modules/gentelella/vendors/nprogress/nprogress.js',
    'node_modules/gentelella/vendors/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js',
    'node_modules/gentelella/build/js/custom.min.js',
], 'public/js/master.js');

This is the error in the console

GET https://dummy.com/fonts/glyphicons-halflings-regular.woff2 404 (Not Found) (in master.js)

I know that the file referenced in the error does not exists but isn't Webpack responsibility to resolve that dependency if it is in my master.js?

martinbean

7 years ago

Best Answer

Level 80

I know that the file referenced in the error does not exists but isn't Webpack responsibility to resolve that dependency if it is in my master.js?

@sandaur No. You’re using the .styles() method. That’s literally just going to concatenate the files you pass it. Mix (and Webpack) is not going to look in your style sheets for assets like images and fonts and then pull them into your project.

Instead, you should look at using a CSS preprocessor like LESS or Sass. When you use either the .less() or .sass() method in Mix, out of the box it will parse your style sheets and then pull out any referenced assets—such as Glyphicons contained in Bootstrap 3—into your project’s public directory.

Please or to participate in this conversation.