Uso de Sass en angular 2

[Compruebe la parte editada al final de esta respuesta en caso de que esté utilizando angular cli]

Explicando cómo usar sass en 'quickstart seed'(https://angular.io/guide/quickstart ) ( https://angular.io/guide/setup#download )

Por favor, siga estos sencillos pasos:

Paso 1: Configurar la semilla de inicio rápido

Utilice los siguientes comandos para configurar

npm install
npm start

Verás 'Hola Angular' en navegador.

Paso 2: Instale node-sass y sass-loader

Utilice los comandos mencionados a continuación para instalar

npm i node-sass -S
npm i sass-loader -S

Ahora puedes ver ambos añadidos en tu paquete 'dependencies' dentro de'.archivo de Json.

Paso 3: Crea 2 carpetas para el código Sass y el código Css

Cree dos carpetas con cualquier nombre en la carpeta "quickstart-master". En este caso, por ejemplo: "sass_folder" y "css_folder". Ahora crear un archivo de demostración 'demo.sass ' and put it dentro de 'sass_folder'. Puedes poner un simple código sass en esto .archivo sass. Se verá así:

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

Paso 4: Hacer cambios en ' paquete.json ' file

Agregue scripts para Compilar y Ver el código Sass presente en "sass_folder". Después de la compilación, el código css resultante debe almacenarse en "css_folder". Después cambia los "Scripts" en ' paquete.el archivo json debería tener este aspecto:

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

Echa un vistazo a 'start', 'build: sass' y 'watch: sass' solo.

Paso 5: Ejecute la aplicación

Ahora puede ejecutar la aplicación mediante el siguiente comando:

npm start

Verá el código css compilado en "css_folder" con el mismo nombre de archivo 'demo.css". Se verá así (En este caso):

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

Ahora si haces algún cambio en .se reflejará en el archivo sass .css archivo dinámicamente como el script está viendo el código.

Si muestra error, Cierre el .archivo css cuando se realiza cualquier cambio en .sass file.

Nota: Para el código scss puede seguir los mismos pasos. Sólo tienes que poner .secs archivo en "sass_folder" en este caso.

[editado] En caso de que desee utilizar Angular CLI:

En el momento de la creación del nuevo proyecto Angular use cmnds mencionados a continuación:

Para sass:

ng new Demo_Project --style=sass

Para scss:

ng new Demo_Project --style=scss

Para cambiar el estilo existente:

ng set defaults.styleExt scss

Después de esto, puede usar Cli normalmente.