Laravel-mix: Problem when importing font from Google in app.scss when running "npm run production"

[nezaboravi]

• Laravel Mix Version: [email protected]
• Node Version v6.9.1
• NPM Version 3.10.8
• OS: macOS Sierra

Description:

When run npm run production, sass and js are successfuly mixed and versioned, but when open a browser window i get error:
Uncaught SyntaxError: Invalid or unexpected token
And here is the line of error:
@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans);/*! b.... etc etc..

From steps to reproduce below :
If i remove google font, still fail on first line. If i leave google font, again fail on first line.
If i remove all of lines and put only
body{ color: red;}
fail on first line.

Steps To Reproduce:

Added this line in app.scss:

@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans);
@import "~bulma";
@import "~font-awesome/css/font-awesome";

Added this in webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css/app.css');
if (mix.config.inProduction) {
    mix.version();
}

from terminal i run:
npm run production

output:

DONE  Compiled successfully in 12612ms
Asset       Size  Chunks                    Chunk Names
fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713     166 kB          [emitted]
fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde     444 kB          [emitted]  [big]  
fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9     166 kB          [emitted]
fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad      98 kB          [emitted]
fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e    77.2 kB          [emitted] 
/js/app.609d37602d04c4b9d29f.js     186 kB       0  [emitted]         /js/app
/css/app.579bbe648b1f3671cc67.css     130 kB       0  [emitted]         /js/app
mix-manifest.json  108 bytes          [emitted]

[ankurk91]

mix.js is different from mix.sass

mix.js files go through webpack while mix.sass not.
If you are calling your app.scss in your app.js then you no need to process it through mix.scss method, webpack will take care of that.
However, If you are not, then you need to add full paths to vendor scss,

Here is how my app.scss looks like -

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// Notice, next file don't have an extension, it is pure css file
@import 'node_modules/font-awesome/css/font-awesome.min';

// Lastly call our app styles
@import "main";

Hope this helps.

Where do you see those errors, in console ? Can you add a screenshot.

[JeffreyWay]

@nezaboravi I'm having trouble reproducing this. I don't see any errors when I try out your code. Hmm..

[nezaboravi]

I am having same issue when i left anything untouched as it comes with default laravel installation via composer, i just run npm install and run npm run production and get exact same error for LAravel font imported in original app.scss
Here is my github.com/nezaboravi/thaidriverlicense but i did not commit there latest changes.
So, maybe you can pull it and run npm install and try it?
This is a second issue i am having with laravel mix, the last one i installed new laravel, moved code from folder A to new folders in new laravel and it was working. I reported issue a couple of days ago

[nezaboravi]

@ankurk91 @JeffreyWay here are screenshoots:

[ankurk91]

Thanks for screenshots.

Can you quote the font url in your app.scss

@import url("https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans");

[nezaboravi]

Thanks for swift reply! I tried quoted and non quoted, its the same result.

[ankurk91]

Copy output css and validate with W3C validator,
https://jigsaw.w3.org/css-validator/#validate_by_input

[nezaboravi]

Huh there is a ton of errors and warning
there are 24 errors in bulma css and interesting is that @import google font does not squeak there..

[ankurk91]

Try to limit the scope, remove vendor css one by one from there, then validate again.

And can you paste your errored css output code to a gist

[nezaboravi]

https://gist.github.com/nezaboravi/4a1e5eb4641bf3d308e0e08cca53954a

[nezaboravi]

when i leave only this: @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans);
With or without quotes, chrome dev tools reports error.
In my app.css file i have exact same line, and only one line: @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Josefin+Sans);
when i paste this line in W3C it passes

[nezaboravi]

I did removing everything and even removed al lines and just added simple body{ color:red} and chrome dev tool reports error at the end of body{color:red}... Really frustrating :(

[ankurk91]

Make sure you are not including a css file using script tag by chance.
Also this can be encoding issue. Go to chrome network tab and see response headers.

Also try to Google same error, this issue is not related to Laravel mix.

[nezaboravi]

I have No script tags in CSS :(
And yes i google it before i posted it in here :) Found someone on laracast with the same problem, he added body style right after importing fonts, and it solved it for him. But not for me.

[ankurk91]

@nezaboravi
I am 100% sure that you are including css via script tag like this ->

<!-- Wrong way to include styles -->
<script src="{{ mix('build/css/app.min.css') }}"></script>

I was able re-produce your error, see screenshot -

How to fix this?

<link href="{{ mix('build/css/app.min.css') }}" rel="stylesheet">

[nezaboravi]

ahhhh! thanks mate!!!

[ashitvora-zz]

Dang! I was also doing the same mistake - :(
This thread came to rescue.