Невозможно использовать стиль SASS в компоненте Angular 2

Question

Согласно this blog, я пытаюсь написать свой компонент следующим образом.

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

Сообщения об ошибках, я получаю 404 на файл navbar.sass (он находится в том же каталоге, что и navbar.ts), а также это один (что я не понимаю и не могу сказать, что делать).

Unhandled Promise rejection: Не удалось загрузить 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] }, 
] 

Это мои погрузчики из списка упаковок.

"узел-Sass": "^ 4.5.0",
"сырым-погрузчик": "^ 0.5.1",
"Сасс-погрузчик": "^ 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 { | background: # 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")] 
})