search

VinceG / laravel-angular

Laravel + Angular application starter
10 stars 6 forks source link

Problems with .scss files in components #5

Open mahnuh opened 7 years ago

mahnuh commented 7 years ago

When running npm run dev I experience the following errors and I don't know how to fix them. Any idea?

ERROR Failed to compile with 5 errors 3:13:31 PM

error in ./resources/assets/src/style/app.scss

Module build failed:

^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /home/vagrant/Workspace/smartstore/resources/assets/src/style/app.scss (line 1, column 1)

@ ./resources/assets/src/style/app.scss 4:14-495 @ ./resources/assets/src/app/app.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/home/home.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /home/vagrant/Workspace/smartstore/resources/assets/src/app/home/home.component.scss (line 1, column 15)

@ ./resources/assets/src/app/home/home.component.scss 4:14-252 @ ./resources/assets/src/app/home/home.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/app.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /home/vagrant/Workspace/smartstore/resources/assets/src/app/app.component.scss (line 1, column 15)

@ ./resources/assets/src/app/app.component.scss 4:14-239 @ ./resources/assets/src/app/app.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/about/about.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /home/vagrant/Workspace/smartstore/resources/assets/src/app/about/about.component.scss (line 1, column 15)

@ ./resources/assets/src/app/about/about.component.scss 4:14-253 @ ./resources/assets/src/app/about/about.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/style/app.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /home/vagrant/Workspace/smartstore/resources/assets/src/style/app.scss (line 1, column 15)
VinceG commented 7 years ago

@mahnuh what node and NPM version do you use?

lagueur commented 6 years ago

@VinceG Hi, I have the same issue: npm run production

@ production /var/www/yobetit/yobetit cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 2/5 modules 3 active .../yobetit/resources/assets/src/main.ts [at-loader] Using typescript@2.6.2 from typescript and "tsconfig.json" from /var/www/yobetit/yobetit/tsconfig.json.

94% asset optimization
[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.835 sec. 95% emitting

ERROR Failed to compile with 7 errors 18:15:21

error in ./resources/assets/src/style/app.scss

Module build failed: html, body { ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/yobetit/yobetit/resources/assets/src/style/app.scss (line 1, column 1)

@ ./resources/assets/src/style/app.scss 4:14-399 @ ./resources/assets/src/app/app.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/app.component.html

Module build failed: Error: Parse Error: <div class=\"flex-center position-ref full-height\">\n <div class=\"content\">\n \n

\n
\n\n" at new HTMLParser (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlparser.js:235:13) at minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:944:3) at Object.exports.minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:1297:10) at Object.module.exports (/var/www/yobetit/yobetit/node_modules/html-loader/index.js:119:26)

@ ./resources/assets/src/app/app.component.ts 11:22-53 @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/home/home.component.html

Module build failed: Error: Parse Error: <div class=\"title m-b-md\">\n Laravel + Angular\n\n\n<div class=\"links\">\n <a [routerLink]=\"['about']\">About\n <a href=\"https://laravel.com\">Laravel\n <a href=\"https://angular.io\">Angular\n" at new HTMLParser (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlparser.js:235:13) at minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:944:3) at Object.exports.minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:1297:10) at Object.module.exports (/var/www/yobetit/yobetit/node_modules/html-loader/index.js:119:26)

@ ./resources/assets/src/app/home/home.component.ts 14:22-54 @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/about/about.component.html

Module build failed: Error: Parse Error: <div class=\"title m-b-md\">\n About\n\n\n

This is a simple example on how to use Angular with Laravel.

\n\n<div class=\"links\">\n <a [routerLink]=\"['']\">Homepage\n" at new HTMLParser (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlparser.js:235:13) at minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:944:3) at Object.exports.minify (/var/www/yobetit/yobetit/node_modules/html-minifier/src/htmlminifier.js:1297:10) at Object.module.exports (/var/www/yobetit/yobetit/node_modules/html-loader/index.js:119:26)

@ ./resources/assets/src/app/about/about.component.ts 14:22-55 @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/app.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /var/www/yobetit/yobetit/resources/assets/src/app/app.component.scss (line 1, column 15)

@ ./resources/assets/src/app/app.component.scss 4:14-288 @ ./resources/assets/src/app/app.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/home/home.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /var/www/yobetit/yobetit/resources/assets/src/app/home/home.component.scss (line 1, column 15)

@ ./resources/assets/src/app/home/home.component.scss 4:14-304 @ ./resources/assets/src/app/home/home.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

error in ./resources/assets/src/app/about/about.component.scss

Module build failed: 

         ^
  Invalid CSS after "module.exports": expected "{", was '= ""'
  in /var/www/yobetit/yobetit/resources/assets/src/app/about/about.component.scss (line 1, column 15)

@ ./resources/assets/src/app/about/about.component.scss 4:14-305 @ ./resources/assets/src/app/about/about.component.ts @ ./resources/assets/src/app/app.module.ts @ ./resources/assets/src/main.ts

        Asset       Size  Chunks                    Chunk Names
 js/vendor.js     874 kB       0  [emitted]  [big]  vendor
    js/app.js    83.5 kB       1  [emitted]         app
    js/mix.js   84 bytes       2  [emitted]         mix

js/polyfills.js 138 kB 3 [emitted] polyfills css/app.css 562 bytes 1 [emitted] app mix-manifest.json 174 bytes [emitted]
img/angular.png 4.51 kB [emitted]
img/favicon.ico 5.43 kB [emitted]
index.html 1.78 kB [emitted]
service-worker.js 43 bytes [emitted]
npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ production: cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/vincent/.npm/_logs/2018-01-25T17_15_21_527Z-debug.log

My npm version is 5.3.0 Node is v8.2.1

I'm looking to use angular 4 + laravel 5 and I found your boilerplate that seems good. Thanks for your help ;)