[英]Sass in Angular 2 and webpack not working
I am acting according to sass-loader package: In my webconfig I have: 我按照sass-loader包进行操作:在我的webconfig中我有:
{
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
In the module I import the scss like this: 在模块中我导入scss像这样:
styles: require('./home.scss') ,
Scss file looks like this: Scss文件如下所示:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
md-card {
font: 100% $font-stack;
color: $primary-color;
}
Unfortunately, when I run the app, the following happens: 不幸的是,当我运行应用程序时,会发生以下情况:
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
I think everything should be ok, when it fails then? 我认为一切都应该没问题,当它失败的时候呢?
I recommend the raw-loader to import styles into angular2 components: https://github.com/webpack/raw-loader 我建议使用raw-loader将样式导入angular2组件: https : //github.com/webpack/raw-loader
...
loaders: [
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
}
]
...
Also styles
should be an Array! styles
应该是数组!
...
styles: [ require('./home.scss') ],
...
Also see: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components 另见: https : //github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components
BTW: You can use the raw-loader for importing templates, too. 顺便说一句:您也可以使用raw-loader导入模板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.