SASS @import 'http://....'

I am using Laravel Mix to compile down Assets outside Laravel.

But within my assets/scss/app.scss SCSS file, I have the following line.

@import 'https://fonts.googleapis.com/css?family=Meera+Inimai';

* {
    font-family: 'Meera Inimai', sans-serif;
}

when I run npm run dev, it is blowing up.

I am not using any extensions or loaders with mix. and the webpack.mix.js file is as follows:

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

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

Any help would be appreciated. I haven't worked with webpack like in old days, only using laravel-mix.

PS: I don't want to use it like below

@import url('https://fonts.googleapis.com/css?family=Meera+Inimai');

The Behavior I am expecting is that The Mix Build should have to download the CSS from the URL and inject that into the resulting CSS File.