薩斯在角2的WebPack不工作

我根據上海社會科學院裝載機包作用：在我的webconfig我：薩斯在角2的WebPack不工作

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

在模塊I導入SCSS是這樣的：

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

SCSS文件看起來像這樣：

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

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

不幸的是，當我運行的應用程序，以下發生s：

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

我認爲一切都應該沒事，當它失敗呢？

來源

2016-04-26 adam nowak

不知道這是問題，而是[元數據]中的'樣式'（https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html#!#styles -anchor）定義對象應該是一個數組：'styles：[require（'./ home.scss'）]，' – yarons

是的，我也嘗試過這種語法，它也不起作用。 –

我推薦的原始裝載機導入樣式到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：您可以使用原始裝載機導入模板了。

來源

2016-04-26 10:55:03 cebor

這個解決方案只適用於開發，只用['raw-loader'，'sass-loader']嘗試構建，我無法找到解決方案，避免在組件中需要。 –

@UlandNimblehoof嘗試：https://www.npmjs.com/package/@ngtools/webpack，它是一個完整的替代tsc，支持自動導入模板/樣式和編譯 – cebor

薩斯在角2的WebPack不工作

回答

相關問題