Question

我按照sass-loader包进行操作：在我的webconfig中，我有：

@model IEnumerable<MPLoyalty_MVC.Models.Loyalty_MenuFront>
@{foreach (var item in Model)
{<li>@Html.ActionLink("" + item.Name, "" + item.Method, "" + item.Controller)</li>}}

在模块中我像这样导入scss：

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

Scss文件如下所示：

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

不幸的是，当我运行应用程序时，会发生以下情况：

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

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

我认为一切都应该没问题，当它失败的时候呢？

Answer 1

我建议使用raw-loader将样式导入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：您也可以使用raw-loader导入模板。

Angular 2中的Sass和webpack无法正常工作

1 个答案: