不能在角2组件

Question

使用SASS风格根据this blog，我想写我的组件这样。

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

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

未处理的承诺拒绝：未能加载navbar.sass;区域：;任务：Promise.then;值：未能加载navbar.sass undefined

我在我的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] }, 
] 

这些是我的装载机从软件包列表中。

“节点萨斯”： “^ 4.5.0”，
“原始装载机”： “^ 0.5.1”，
“SASS装载机”： “^ 5.0.1”，
“TS-装载机”： “^ 2.0.0”，...

编辑

更详尽的错误信息如下。

./source/application/navigation/navbar.sass
模块解析失败：C：\ Webular2 \ node_modules \青菜装载机\ LIB \ loader.js！C：\ Webular2 \ source \ application \ navigation \ navbar.sass意外标记（1：4） 您可能需要一个合适的加载器来处理此文件类型。 | div { |背景：＃dd00ff; | border：1px solid＃ff9900; } @ ./source/application/navigation/navbar.ts 37：17-41 @ ./source/application/app.module.ts @ ./source/application/main.ts @ multi（webpack） - DEV-服务器/客户端？ http://localhost:3002 ./source/application/main.ts

Answer 1

尝试嵌入风格：

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