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''
]
},