如何使 karma 与 webpack、Angular2 和 SASS 项目一起工作？答案

【问题标题】：How to make karma work with a webpack, Angular2, and SASS project?如何使 karma 与 webpack、Angular2 和 SASS 项目一起工作？
【发布时间】：2016-09-08 02:55:08
【问题描述】：

我正在使用angular2-webpack-starter，并且我的样式表是 SASS。一切正常，但是当我尝试运行业力测试时，它失败了，给了我这个错误

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

我尝试安装karma-sass-preprocessor 和karma-scss-preprocessor，但似乎没有任何效果。我该怎么办？

【问题讨论】：

标签： sass angular webpack karma-jasmine angular2-testing

【解决方案1】：

所以答案很简单，我有

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

在我的webpack.common.js 中，出于某种原因，我认为webpack.test.js 也得到了它，但事实证明我也应该将它添加到webpack.test.js

【讨论】：

在我的情况下处理挂起 62%，但如果我使用加载器： ['raw-loader', 'style-loader','css-loader', 'sass-loader'] ，处理正在完成，但未加载 scss 样式。
我在stackoverflow.com/questions/49818744 有相关的问题，如果你能帮忙，你能看看吗？

【解决方案2】：

我建议你使用 Angular cli，你有很好的引导项目示例。

https://cli.angular.io/

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

但是在这里您可以找到有关您的问题的一些答案： https://github.com/AngularClass/angular2-webpack-starter/issues/136

【讨论】：

github 问题是关于项目本身的 sass 而不是 Karma