laravel-mix: 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]         

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (6 by maintainers)

Most upvoted comments

ahhhh! thanks mate!!!

@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 - screenshot from 2017-03-24 08-59-39

How to fix this?

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

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.