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

Question

我一直在這里按照https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components中的指南進行操作，以將scss文件作為我的角度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

按照自述文件的說明進行構建和提供服務。

似乎沒有太多關於在組件中包含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 {}