1

I am using angular2-webpack-starter and I have my stylesheets as SASS. Everything is working perfectly, but when I try to run karma tests it fails giving me this error 

ERROR in ./src/app/widgets/message/messages.scss
Module parse failed: d:\ui_widgets-A2\src\app\widgets\message\messages.scss Unexpected token (6:22)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:22)
    at Parser.pp.raise (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.semicolon (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1462:73)
    at Parser.pp.parseExpressionStatement (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1976:8)
    at Parser.pp.parseStatement (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1754:188)
    at Parser.pp.parseTopLevel (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1648:21)
    at Parser.parse (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:1616:17)
    at Object.parse (d:\ui_widgets-A2\node_modules\acorn\dist\acorn.js:882:44)
    at Parser.parse (d:\ui_widgets-A2\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (d:\ui_widgets-A2\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at d:\ui_widgets-A2\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (d:\ui_widgets-A2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at d:\ui_widgets-A2\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
 @ ./src/app/widgets/message/message.component.ts 9:431-457

I tried to install karma-sass-preprocessor and karma-scss-preprocessor but nothing seems to work. What should I do?

Mostafa Fateen
  • 849
  • 1
  • 14
  • 33

2 Answers2

3

So the answer is pretty trivial, I had

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader']
  }

in my webpack.common.js and for some reason I thought that webpack.test.js was getting it as well, but as it turns out I should have also added it to webpack.test.js

Mostafa Fateen
  • 849
  • 1
  • 14
  • 33
  • in my case processing hangs on 62%, but if I use loaders: ['raw-loader', 'style-loader','css-loader', 'sass-loader'] , processing being done but scss style is not loading. – Deep Kakkar Apr 14 '18 at 13:53
  • I have the related question on https://stackoverflow.com/questions/49818744 , can you please look into it , if you can help? – Deep Kakkar Apr 14 '18 at 13:54
0

I would suggest you using angular cli there you have nice examples with bootstrapping project.

https://cli.angular.io/

https://github.com/angular/angular-cli#css-preprocessor-integration

But here you can find some answers regarding your problem: https://github.com/AngularClass/angular2-webpack-starter/issues/136

igorzg
  • 1,506
  • 14
  • 17