javascript - Angular 2 Webpack 2 - Sass 在组件中不起作用

Question

我一直在关注这里的指南https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components在将 scss 文件合并为 angular 2 组件的样式方面，但它不起作用。

如何使用 webpack 将 scss 文件合并到我的 angular 2 组件中？

这里是主要组件:

import { Component } from '@angular/core';


@Component({
    selector: 'my-app',
    templateUrl: 'src/app/app.component.html',
    styleUrls: [ 'src/app/app.component.scss' ]
})
export class AppComponent {
    constructor() {}

    name: string = 'My Demo';
}

我知道这篇文章建议在我的 webpack 配置中使用 raw-loader，但这也不起作用

scss 只是保留在其中，没有经过预处理。

您可以在此处的 plnkr 查看我的基本项目的详细信息:https://plnkr.co/edit/eG1POBcBL8kGpvrhh3yW?p=info

按照 README 说明构建和服务。

似乎没有很多关于在组件中包含 scss 文件的最新文档？

Answer 1

如果您想要一个开箱即用的 SCSS 新项目，请使用 angular-cli 生成它你可以开始了。 imo 比自己实现 sass 容易得多。

ng new sassy-project --style=sass

或:

ng new sassy-project --style=scss