不能在角2组件中使用SASS样式

Question

根据这个博客的说法，我试图像这样写我的组件。

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

我得到的文件navbar.sass上的错误消息是404 (它与navbar.ts位于同一个目录中)，还有这个错误消息(我不明白，也不知道该如何处理)。

未处理的承诺拒绝:未能加载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] },
]

这是我的包装清单上的装载机。

节点-sass："^4.5.0"， “原始装载机”："^0.5.1"， "sass-loader"："^5.0.1"， “ts-载入器”："^2.0.0"，.

编辑

更详细的错误消息如下所示。

/源代码/应用程序/导航/Navbar.sass 模块解析失败: C:...\Webular2\node_modules\sass-loader\lib\loader.js!C:...\Webular2\source\application\navigation\navbar.sass意外令牌(1:4)您可能需要一个适当的加载程序来处理该文件类型。@@.http://localhost:3002/source/application/main.ts.@ ./source/application/main.ts @/source/application/main.ts@.

Answer 1

尝试嵌入样式：

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