CODEWITHSUNDEEP
laravelsass
Alex
Alex

Reputation: 1260

Laravel 5.8 scss compiling Expected ":". error

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?

Upvotes: 0

Views: 194

Answers (1)

Jerodev
Jerodev

Reputation: 33186

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 :.

Upvotes: 3

Related Questions