Estoy intentando configurar Sass en mi proyecto Angular 2. Básicamente, según tengo entendido, hay dos formas de crear un proyecto angular 2

1) Uso de angular-cli (https://github.com/angular/angular-cli)

Remití la respuesta mencionada en https://stackoverflow.com/a/41541042/2868352 y pude usar {{X0 }} archivos en el proyecto angular 2, todo funcionó muy bien, pero no pude ubicar el archivo css generado desde el archivo scss en la carpeta del proyecto. ¿Alguien podría explicar la razón por la que no se generó ningún archivo css pero aún así funcionó?

2) Uso de quickstart seed (https://angular.io/guide/quickstart )

No pude obtener ninguna información sobre cómo configurar sass en el proyecto de inicio rápido. ¿Alguien tiene alguna idea sobre el uso de sass en el proyecto de inicio rápido proporcionado por angular?

¡Gracias de antemano!

25
Abhishek V 24 feb. 2017 a las 11:31

3 respuestas

La mejor respuesta

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

Explicando cómo usar sass en 'semilla de inicio rápido' (https://angular.io/guide / inicio rápido) (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á 'Hello Angular' en el navegador.

Paso 2: Instalar node-sass y sass-loader

Use los comandos mencionados a continuación para instalar

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

Ahora puede ver ambas cosas agregadas en sus 'dependencias' dentro del archivo 'package.json'.

Paso 3: Cree 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 cree un archivo de demostración 'demo.sass' y póngalo dentro de 'sass_folder'. Puede poner un código sass simple en este archivo .sass. Se verá así:

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

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

Paso 4: realice cambios en el archivo 'package.json'

Agregue scripts al código Build y Watch Sass presente en "sass_folder". Después de la compilación, el código css resultante debe almacenarse en "css_folder". Después de los cambios, los "Scripts" en el archivo 'package.json' deberían verse así:

"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/"
  }

Eche un vistazo a 'start', 'build: sass' y 'watch: sass' solamente.

Paso 5: Ejecute la aplicación

Ahora puede ejecutar la aplicación utilizando 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 realiza algún cambio en el archivo .sass, se reflejará en el archivo .css dinámicamente a medida que el script esté viendo el código.

Si muestra un error, cierre el archivo .css cuando realice algún cambio en el archivo .sass.

Nota: para el código scss puede seguir los mismos pasos. Solo tiene que poner el archivo .scss en "sass_folder" en este caso.

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

En el momento de la creación del nuevo proyecto Angular, utilice los 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.

42
Evan Wieland 20 sep. 2017 a las 16:12

Hay dos escenarios principales aquí.

  1. Cuando cree un nuevo proyecto CLI angular, use el comando CLI

    ng new my-angular-app --style=scss

  2. Cuando ya se ha configurado un proyecto CLI angular, use el comando CLI

    ng set default.styleExt scss

En el caso 2, debe convertir manualmente los archivos .css existentes. También puede usar sass o less en lugar de scss

Mira el artículo completo aquí.

Uso de SCSS / SASS / LESS en el proyecto CLI angular

1
Jayesh Panchal 19 mar. 2018 a las 09:21

Te puedo explicar el primero.

Si está utilizando ng server los archivos compilados se guardan en una carpeta oculta en su proyecto.

Si está utilizando ng build, puede ver sus archivos compilados en la carpeta / dist. En esta carpeta puede encontrar sus estilos generales en los estilos de archivo. [Hashversion] .css, pero los estilos de componentes locales se incluyen dentro de main. [Hashversion] .js de Webpack.

Angular-cli usa webpack, y si desea obtener más información, consulte Documentos de Webpack

ACTUALIZACIÓN

En el segundo caso, debe compilar sass manualmente. En la carpeta de la aplicación, tenga un app.component.ts que se compilará en la misma carpeta para app.component.js por el Compilador de Script. Entonces tienes que hacer lo mismo con sass. Importe el archivo CSS en el componente.

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

Notó que no puede usar la ruta relativa porque todo se solicitará desde el directorio raíz.

Crea un app.component.sass y coloca tus estilos dentro.

Luego ejecute el compilador sass que compila app.component.sass a app.component.css

Ejecute el servidor y funcionará.

5
Sunil Garg 16 mar. 2017 a las 12:23