如何让 karma 与 webpack、Angular2 和 SASS 项目一起工作?
How to make karma work with a webpack, Angular2, and SASS project?
我正在使用 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 and karma-scss-preprocessor 但似乎没有任何效果。我该怎么办?
我建议您使用 angular cli 那里有很好的引导项目示例。
https://github.com/angular/angular-cli#css-preprocessor-integration
但是您可以在这里找到有关您的问题的一些答案:
https://github.com/AngularClass/angular2-webpack-starter/issues/136
所以答案很简单,我有
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader']
}
在我的 webpack.common.js
中,出于某种原因我认为 webpack.test.js
也得到了它,但事实证明我也应该将它添加到 webpack.test.js
我正在使用 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 and karma-scss-preprocessor 但似乎没有任何效果。我该怎么办?
我建议您使用 angular cli 那里有很好的引导项目示例。
https://github.com/angular/angular-cli#css-preprocessor-integration
但是您可以在这里找到有关您的问题的一些答案: https://github.com/AngularClass/angular2-webpack-starter/issues/136
所以答案很简单,我有
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader']
}
在我的 webpack.common.js
中,出于某种原因我认为 webpack.test.js
也得到了它,但事实证明我也应该将它添加到 webpack.test.js