ウェブパック、Angular2、SASSプロジェクトでカルマを動作させるにはどうすればいいですか？

Question

私はangular2-webpack-starterを使用しており、私はSASSとして自分のスタイルシートを持っています。すべてが完璧に働いているが、私はカルマのテストを実行しようとすると、それは私に私がkarma-sass-preprocessorとkarma-scss-preprocessorをインストールしようとしましたが、何も動いていないようにみえこのエラー

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 

を与えることができません。私は何をすべきか？

Answer 1

を、私は私のwebpack.common.jsに

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

を持っていました何らかの理由で私は考えていたwebpack.test.jsそれもそれを得ていたが、それが判明したように私はまたそれを加えたはずだったはずだwebpack.test.js

Answer 2

私は角度クリッピングを使用することをお勧めします。そこには、ブートストラッププロジェクトの素晴らしい例があります。

https://cli.angular.io/

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

しかし、ここで、あなたはあなたの問題に関するいくつかの答えを見つけることができます。だから、答えは非常に簡単である https://github.com/AngularClass/angular2-webpack-starter/issues/136