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

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

Как мне включить файлы scss в мои компоненты angular 2 с помощью webpack?

Вот главный компонент:

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';
}

Я знаю, что в статье рекомендуется использовать raw-loader в моей конфигурации веб-пакета, но он тоже не работает

Scss просто остается в без предварительной обработки.

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

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

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


webpack javascript angular angularjs webpack-2
person Rich    schedule 30.01.2017    source источник
comment
Если это не работает, это не вопрос. В чем собственно вопрос?   -  person Roman C    schedule 31.01.2017
comment
@RomanC, как мне заставить компонент работать с sass? Как мне включить файлы scss в мои компоненты angular 2 с помощью webpack?   -  person Rich    schedule 31.01.2017
comment
@RomanC Обновил вопросы :)   -  person Rich    schedule 31.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

ng new sassy-project --style=sass

or:

ng new sassy-project --style=scss
person Bram De Backer    schedule 30.01.2017
comment
Интересно. Спасибо! Хотя это кажется излишним, поэтому такое стандартное требование. - person Rich; 31.01.2017

arrow_upward
1
arrow_downward

Похудеть можно следующим образом:

Командная строка внутри папки проекта, в которой находится ваш существующий 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 {}
person Max K    schedule 31.01.2017
comment
Мой проект создан с использованием angular-cli, и я не могу найти файл webpack.common.js в корне моего проекта. Единственное место, где я могу найти webpack.common.js, - это внутри node_modules разработчика webpack, и редактировать там небезопасно. - person eHussain; 08.03.2017
comment
Да, это решение похоже на https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components, но не работает. Вы в конце концов поняли это? с той же проблемой. - person Kimmiekim; 09.03.2017