萨斯在角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不工作

回答

相关问题