Problem when importing font from Google in app.scss when running "npm run production"

• Laravel Mix Version: laravel-mix@0.8.9
• 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]         

[nezaboravi]

ahhhh! thanks mate!!!

[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">