I just want to know what I can do to get my custom fonts to have the proper url processed after compilation.

I’m having a problem with Laravel Mix… I just want to know what I can do to get my custom fonts to have the proper url processed after compilation.

So my web pack.mix.js file:

mix

  .js('assets/js/app.js', 'web/themes/MYPROJECT/js')

  .sass('assets/scss/app.scss', 'web/themes/MYPROJECT/css', { outputStyle: 'nested' })

  .options({

    fileLoaderDirs: {

      fonts: 'web/themes/MYPROJECT/fonts'

    }

  })

  .copy('assets/fonts/novecento_sans_widedemibold', 'web/themes/MYPROJECT/fonts/vendor/novecento_sans_widedemibold')

  .webpackConfig({

    plugins: [

      new CopyWebpackPlugin([

        {

          from: 'assets/images',

          to: 'web/themes/MYPROJECT/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 }

      })

    ]

  });

My app.scss file:

@font-face {

    font-family: 'novecento_sans_widedemibold';

    src: url('../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.eot');

    src: url('../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.woff2') format('woff2'),

         url('../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.woff') format('woff'),

         url('../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;



}

When I run yarn run dev I get this error: ERROR in ./assets/scss/app.scss Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/vendor/novecento_sans_widedemibold/Novecentosanswide-DemiBold-webfont.eot' in '/Users/me/MYPROJECT/SourceCode/assets/scss’

If I add processCssUrls: false to the options setting. My fonts work just fine BUT font-awesome fonts do not. How can I get both the work fine?