Sass в Угловое 2 и WebPack не работает

Question

Я действую в соответствии с пакетом дерзость-погрузчик: В моем WebConfig у меня есть:

{ 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loaders: ["style", "css", "sass"] 
      } 
     ] 
    } 

В модуле я импортировать SCSS так:

styles: require('./home.scss') , 

SCSS файл выглядит следующим образом:

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

md-card { 
font: 100% $font-stack; 
color: $primary-color; 
} 

к сожалению, когда я запустить приложение, следующее произойдет с:

ERROR in ./src/app/home/home.scss 
Module parse failed: C:\src\app\home\home.scss Line 1: Unexpected token : 
You may need an appropriate loader to handle this file type. 
| $font-stack: Helvetica, sans-serif; 
| $primary-color: #333; 
| 
@ ./src/app/home/home.component.ts 49:20-42 

Я думаю, что все должно быть в порядке, когда это не удается?

Answer 1

Я рекомендую забортной погрузчик импортировать стили в angular2 компоненты: https://github.com/webpack/raw-loader

... 
loaders: [ 
    { 
     test: /\.scss$/, 
     loaders: ['raw-loader', 'sass-loader'] 
    } 
] 
... 

Также styles должен быть массив!

... 
styles: [ require('./home.scss') ], 
... 

Также смотрите: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

BTW: Вы можете использовать необработанный-загрузчик для импорта шаблонов тоже.