Mix processing URL is causing an error

Hello devs.

I'm trying to import a css file inside my auth.scss main file which will be compiled via mix

@import "custom";

@import "../assets/css/main.css";

here's my mix file

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.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/auth.scss', 'public/css')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

the issue is inside this main.css file I have these src:url styles and they are causing the issue even though the font path is correct.

@font-face {
  font-family: "Nucleo Outline";
  src: url("../fonts/nucleo-outline.eot");
  src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"),
    url("../fonts/nucleo-outline.woff2") format("woff2"),
    url("../fonts/nucleo-outline.woff") format("woff"),
    url("../fonts/nucleo-outline.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

so when I run npm run watch it fails:

Error: Can't resolve '../fonts/nucleo-outline.eot'

ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

does anyone know how to solve this issue? is it a bug in mix?