角2のコンポーネントでSASSスタイルを使用できません

Question

this blogによると、私はこのようなコンポーネントを記述しようとしています。私は取得しています

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

エラーメッセージがファイルに404あるnavbar.sass私は理解していないことを（それはnavbar.tsと同じディレクトリにあります）も、この1（何をどうしたらいいか分からない）。

未処理プロミス拒否：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ローダ"： "^ 5.0.1"
"TS-ローダー"： "^ 2.0.0"、次のように、より精巧なエラーメッセージがある...

編集

。

./source/application/navigation/navbar.sass
モジュールの解析に失敗しました：C：... \ Webular2 \ node_modules \ SASS-ローダーのlib \ loader.js \ C：！... \ Webular2 \ source \ application \ navigation \ navbar.sass予期しないトークン（1：4） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | div { |背景：＃dd00ff; |国境：1px solid＃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

Answer 1

は、スタイルを埋め込むようにしてください：

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