Laravel 5.8 scss compiling Expected ":". error - laravel

Question

I am developing a Laravel project running on localhost with php artisan serve, when I run npm run watch command to compile sass code I get the error Expected ":". at the beginning of the app.scss
The error is:
$import url('https://fonts.googleapis.com/css?family=Nunito');
^
Expected ":".
╷
2 │ $import url('https://fonts.googleapis.com/css?family=Nunito');
│ ^
╵
stdin 3:9 root stylesheet
in C:\Users\user\Documents\myApp\resources\sass\app.scss (line 3, column 9)
the app.scss first 6 lines are:
// Fonts
$import url('https://fonts.googleapis.com/css?family=Nunito');
$import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
// Variables
$import 'variables';
I don't see where are missing the ":". I never used ":" in the #import directive
What am I missing? why am I getting this error? How to solve it?
Laravel 5.8.35
Windows 10 pro 17763.737
PHP Version 7.1.29
Composer version 1.8.5

Answer 1

It should be an # in front of the import:
#import url('https://fonts.googleapis.com/css?family=Nunito');
https://sass-lang.com/documentation/at-rules/import
Variables have an $ in front of them and need : after them to give them a value. The compiler thinks you are creating an $import variable in your case, that's why it expects a :.