css - ¿Cómo usar SASS para el estilo de los componentes en Angular 2?

gulp-ruby-sass

Question

En Angular 2 cuando definimos un componente, podemos especificar una propiedad styleUrls al decorador que apunta a un conjunto de hojas de estilo para aplicar al componente:

@Component({
    selector: ''the-app''
    templateUrl: ''templateFile.html'',
    styleUrls: [''componentStyles.css'', ''moreComponentStyles.css'']
})
export class TheAppComponent {}

Ahora, ¿y si quiero escribir estos estilos con SASS?

Sé que necesitaría usar Gulp o Grunt para transpilar las hojas de estilo SCSS a CSS simple. Pero esto me confunde sobre cómo apuntar correctamente a Angular a las hojas de estilo correctas.

¿Cómo podría organizar este flujo de trabajo de usar SASS con Gulp / Grunt junto con Angular 2? ¿Cómo usar SASS para escribir los estilos de componentes de Angular 2?

Answer 1

Puedes usar .scss en Component como este-

styles: [require(''normalize.css''), require(''./app.scss'')],

Vea si esto ayuda.

Answer 2

Lo estoy usando de esta manera:

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

// for webpack
require(''./footer.scss'');

@Component({
     selector: ''footer'',
     templateUrl: ''app/footer/footer.html'',
    styleUrls: [''app/footer/footer.scss''],
})
export class FooterComponent {}

Answer 3

Línea de comando dentro de la carpeta del proyecto donde está el package.json existente: npm install node-sass sass-loader raw-loader --save-dev

En webpack.common.js, busque "rules:" y agregue este objeto al final de la matriz de reglas (no olvide agregar una coma al final del objeto anterior):

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

Luego en tu componente:

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

Answer 4

Después de seguir esta wiki , recibí un Error: Uncaught (in promise): Expected ''styles'' to be an array of strings que resolví con esta respuesta .

La solución final está aquí:

home.component.ts:

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

@Component({
  selector: ''home'',
  template: require(''./home.component.html''),
  styles: [ String(require(''./home.component.scss'')) ]
})

export class HomeComponent { }

webpack.conf.js : (parte de él)

  {
    test: //.(css|scss)$/,
    loaders: [
      ''style'',
      ''css'',
      ''sass'',
      ''postcss''
    ]
  },