不能在 Angular 2 组件中使用 SASS 样式答案

【问题标题】：Can't use SASS style in Angular 2 component不能在 Angular 2 组件中使用 SASS 样式
【发布时间】：2017-02-13 00:08:12
【问题描述】：

根据this blog，我正在尝试这样编写我的组件。

@Component({
  selector: "navbar",
  template: require("./navbar.html"),
  styleUrls: ["./navbar.sass"]
})

我收到的错误消息是文件 navbar.sass 上的 404（它与 navbar.ts 位于同一目录中）以及这个（我不明白，也不知道该怎么办）。

未处理的 Promise 拒绝：无法加载 navbar.sass ；区域：;任务：Promise.then；值：无法加载 navbar.sass 未定义

我的 Webpack 配置文件中定义了以下加载器。

loaders: [
  { test: /\.png$/, loader: "raw-loader", include: [resources] },
  { test: /\.sass$/, loader: "sass-loader" },
  { test: /\.html$/, loader: "raw-loader", include: [application] },
  { test: /\.ts$/, loader: "ts-loader", include: [application] },
]

这些是我的包列表中的加载器。

"node-sass": "^4.5.0",
“原始加载器”：“^0.5.1”，
"sass-loader": "^5.0.1",
"ts-loader": "^2.0.0",...

编辑

更详细的错误信息如下。

./source/application/navigation/navbar.sass
模块解析失败：C:...\Webular2\node_modules\sass-loader\lib\loader.js!C:...\Webular2\source\application\navigation\navbar.sass 意外令牌 (1:4) 您可能需要适当的加载程序来处理此文件类型。 |分区 { |背景：#dd00ff； |边框：1px 实心#ff9900； } @ ./source/application/navigation/navbar.ts 37:17-41 @ ./source/application/app.module.ts @ ./source/application/main.ts @multi (webpack)-dev-server/client?http://localhost:3002./source/application/main.ts

【问题讨论】：

标签： angularjs angular npm sass

【解决方案1】：

尝试嵌入样式：

@Component({
  selector: "navbar",
  template: require("./navbar.html"),
  styles: [require("./navbar.sass")]
})

【讨论】：

我现在得到了这个：Module parse failed。但是，我也可以在错误消息中看到 SASS 文件已被转换为 CSS。我还需要其他装载机吗？
请查看编辑。我全贴了。本来我打算避免淹没文本问题。我的错。
在您提供的链接中：loaders: ['raw-loader', 'sass-loader'] loaders are chained.
我在发布问题之前就已经对其进行了测试。我尝试了 with raw-loader，但没有成功。但是，我刚刚意识到，那时我在 SASS 文件的 require 前面有斜线。所以。吓坏了。愚蠢的。我想是时候离开键盘几个小时了。 +1 持久性。谢谢，伙计！