PenAndPapers PenAndPapers - 1 month ago 15
Node.js Question

NG6 Angular sass files error

I've started using NG6 Angular recently and I kinda like it, but it got me stuck when I tried to use sass instead of its default styl coz it's what I use in my projects. I have installed all dependencies including node-sass and sass-loader you can check it here. Below are my configs and error when I test it using npm test

gulpfile.babel.js

let paths = {
js: resolveToComponents('**/*!(.spec.js).js'), // exclude spec files
styl: resolveToApp('**/*.scss'), // stylesheets
};


webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
devtool: 'source-map',
entry: {},
module: {
loaders: [
{ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.css$/, loader: 'style!css' }
]
},
plugins: [
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/index.html',
inject: 'body',
hash: true
}),

// Automatically move all modules defined outside of application directory to vendor bundle.
// If you are using more complicated project structure, consider to specify common chunks manually.
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module, count) {
return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
}
})
]
};


error log

START:
Hash: fcc86e1c1f5bc16638ec
Version: webpack 1.13.2
Time: 3870ms
Asset Size Chunks Chunk Names
spec.bundle.js 4.42 MB 0 [emitted] spec.bundle.js
chunk {0} spec.bundle.js (spec.bundle.js) 1.68 MB [rendered]
[0] ./spec.bundle.js 1.5 kB {0} [built]
[1] ./~/angular/index.js 48 bytes {0} [built]
[2] ./~/angular/angular.js 1.19 MB {0} [built]
[3] ./~/angular-mocks/angular-mocks.js 108 kB {0} [built]
[4] ./client/app \.spec\.js 329 bytes {0} [built]
[5] ./client/app/common/hero/hero.spec.js 1.77 kB {0} [optional] [built]
[6] ./client/app/common/hero/hero.js 622 bytes {0} [built]
[7] ./~/angular-ui-router/release/angular-ui-router.js 367 kB {0} [built]
[8] ./client/app/common/hero/hero.component.js 523 bytes {0} [built] [1 error]
[9] ./client/app/common/hero/hero.html 63 bytes {0} [built]
[10] ./client/app/common/hero/hero.controller.js 481 bytes {0} [built]
[11] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
[13] ./client/app/common/navbar/navbar.spec.js 1.81 kB {0} [optional] [built]
[14] ./client/app/common/navbar/navbar.js 640 bytes {0} [built]
[15] ./client/app/common/navbar/navbar.component.js 549 bytes {0} [built] [1 error]
[16] ./client/app/common/navbar/navbar.html 63 bytes {0} [built]
[17] ./client/app/common/navbar/navbar.controller.js 491 bytes {0} [built]
[19] ./client/app/common/user/user.spec.js 1.77 kB {0} [optional] [built]
[20] ./client/app/common/user/user.js 622 bytes {0} [built]
[21] ./client/app/common/user/user.component.js 523 bytes {0} [built] [1 error]
[22] ./client/app/common/user/user.html 63 bytes {0} [built]
[23] ./client/app/common/user/user.controller.js 481 bytes {0} [built]
[25] ./client/app/components/about/about.spec.js 1.79 kB {0} [optional] [built]
[26] ./client/app/components/about/about.js 766 bytes {0} [built]
[27] ./client/app/components/about/about.component.js 536 bytes {0} [built] [1 error]
[28] ./client/app/components/about/about.html 180 bytes {0} [built]
[29] ./client/app/components/about/about.controller.js 486 bytes {0} [built]
[31] ./client/app/components/home/home.spec.js 1.77 kB {0} [optional] [built]
[32] ./client/app/components/home/home.js 808 bytes {0} [built]
[33] ./client/app/components/home/home.component.js 523 bytes {0} [built] [1 error]
[34] ./client/app/components/home/home.html 176 bytes {0} [built]
[35] ./client/app/components/home/home.controller.js 481 bytes {0} [built]

ERROR in ./client/app/common/hero/hero.scss
Module parse failed: /development/sites/www/Angular/client/app/common/hero/hero.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./client/app/common/hero/hero.component.js 15:0-22

ERROR in ./client/app/common/navbar/navbar.scss
Module parse failed: /development/sites/www/Angular/client/app/common/navbar/navbar.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./client/app/common/navbar/navbar.component.js 15:0-24

ERROR in ./client/app/common/user/user.scss
Module parse failed: /development/sites/www/Angular/client/app/common/user/user.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./client/app/common/user/user.component.js 15:0-22

ERROR in ./client/app/components/about/about.scss
Module parse failed: /development/sites/www/Angular/client/app/components/about/about.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./client/app/components/about/about.component.js 15:0-23

ERROR in ./client/app/components/home/home.scss
Module parse failed: /development/sites/www/Angular/client/app/components/home/home.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/development/sites/www/Angular/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/development/sites/www/Angular/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/development/sites/www/Angular/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/development/sites/www/Angular/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
@ ./client/app/components/home/home.component.js 15:0-22
21 10 2016 17:56:58.794:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
21 10 2016 17:56:58.800:INFO [launcher]: Starting browser Chrome
21 10 2016 17:56:58.801:ERROR [launcher]: No binary for Chrome browser on your platform.
Please, set "CHROME_BIN" env variable.

Finished in 0 secs / 0 secs

npm ERR! Test failed. See above for more details.

Answer

It turns out that I need also to replace this code section in karma.conf.js

{ test: /\.styl$/, loader: 'style!css!stylus' },

with

{ test: /\.scss$/, loader: 'style!css!sass' },

now Im only getting chrome browser error since I dont have chrome installed

npm test

> ng6-starter@0.0.1 test /development/sites/www/Angular
> karma start


START:
24 10 2016 08:41:56.417:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
24 10 2016 08:41:56.424:INFO [launcher]: Starting browser Chrome
24 10 2016 08:41:56.425:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

Finished in 0 secs / 0 secs