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

Answer 2

你可以通过以下方式瘦身：

现有 package.json 所在的项目文件夹中的命令行：

npm install node-sass sass-loader raw-loader --save-dev

在 webpack.common.js 中，搜索“loaders:”并将这个对象添加到 loaders 数组的末尾（不要忘记在前一个对象的末尾添加逗号）：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

然后在你的组件中：

@Component({
  styleUrls: ['./filename.scss'],
})

如果您想要全局 CSS 支持，那么在顶级组件（可能是 app.component.ts）上移除封装并包含 SCSS：

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

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}