Angular2 和 webpack，组件需要 sass 中断单元测试答案

【问题标题】：Angular2 and webpack, component require sass breaks unit testsAngular2 和 webpack，组件需要 sass 中断单元测试
【发布时间】：2016-10-19 15:06:47
【问题描述】：

我目前正在使用 Angular2、Sass、Webpack 开始一个新项目，编写测试并运行 Gulp/Karma。然而不幸的是，一旦我开始在组件中需要我的 Sass 文件，我的单元测试就崩溃了。我在 React 和 Mocha 中看到过类似的关于这个问题的参考，但是我不太确定如何用我的设置来解决它。

例子：

@Component({
    ...
    template: require('./dashboard.component.html'),
    styles: [ require('./dashboard.component.scss') ]
})
export class DashboardComponent {
   ... 
}

当我尝试运行我的测试时，它似乎一旦尝试加载需要 Sass 文件的组件就会中断。

ERROR in ./scripts/app/dashboard/dashboard.component.scss
Module parse failed: [path]/dashboard.component.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

非常感谢任何帮助 - 谢谢！

【问题讨论】：

标签： angular sass gulp webpack karma-runner

【解决方案1】：

刚刚意识到我在 webpack 配置部分下的 karma.conf.js 中缺少 sass-loader。

刚刚在加载器中添加了以下内容：

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

现在它工作正常。哎呀！

【讨论】：