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)
ahhhh! thanks mate!!!
@nezaboravi I am 100% sure that you are including css via
scripttag like this ->I was able re-produce your error, see screenshot -
How to fix this?
Make sure you are not including a css file using
scripttag 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.