Angular 2 Webpack 2 - Sass не работает в компоненте

Question

Я слежу за руководством здесь https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components с точки зрения включения файлов scss в качестве моих стилей для угловых компонентов 2, но он не работает.

Как включить scss-файлы в мои угловые 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 конфигурации, но это не работает, либо

СКС просто остается в без препроцессора ,

Вы можете увидеть подробности для моего основного проекта в plnkr здесь: https://plnkr.co/edit/eG1POBcBL8kGpvrhh3yW?p=info

Следуйте инструкциям README для создания и служить.

Не похоже, что есть много актуальной документации по включению scss-файлов в компоненты?

Answer 1

Если вы хотите, чтобы новый проект с SCSS работал из коробки, сгенерируйте его с помощью angular-cli, и вы хорошо пойдете. Гораздо проще, чем реализовать сасс самостоятельно imo.

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, найдите «загрузчики:» и добавьте этот объект в конец массива загрузчиков (не забудьте добавить запятую в e го предыдущего объекта):

{ 
    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 {}