Angular-cli de css a scss

135

He leído la documentación , que dice que si quiero usar scsstengo que ejecutar el siguiente comando:

ng set defaults.styleExt scss

Pero cuando hago eso y hago ese archivo, sigo recibiendo este error en mi consola:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
Jamie
fuente
1
Eso solo funcionará para los archivos que generes a partir de ese punto, no creo que arregle los que ya tienes. Si vas git diffa ver lo que ha cambiado.
jonrsharpe
Pero todavía no tengo archivos. Solo quiero cambiar.
Jamie
¿Cómo no tienes archivos todavía? Si está creando un nuevo proyecto, ¿por qué lo configura de esa manera?
jonrsharpe
Recién comenzando con angular2. Estoy tratando de resolverlo todo.
Jamie
1
Si está creando un nuevo proyecto, haga lo ng new whatever --style=scss que se muestra en los documentos . ¡No siga las instrucciones para configurar un proyecto existente si eso no es lo que está haciendo!
jonrsharpe

Respuestas:

267

Para Angular 6 verifique la documentación oficial

Nota: Para @angular/cliversiones anteriores a las que se 6.0.0-beta.6usan ng seten lugar de ng config.

Para proyectos existentes

En un proyecto angular-cli existente que se configuró con los cssestilos predeterminados , deberá hacer algunas cosas:

  1. Cambie la extensión de estilo predeterminada a scss

Cambie manualmente en .angular-cli.json(Angular 5.xy anterior) o angular.json(Angular 6+) o ejecute:

ng config defaults.styleExt=scss

si obtiene un error: Value cannot be found.use el comando:

ng config schematics.@schematics/angular:component.styleext scss

(* fuente: opciones de CLI SASS angular )

  1. Cambie el nombre de sus .cssarchivos existentes a .scss(es decir, styles.css y app / app.component.css)

  2. Apunte la CLI para buscar styles.scss

Cambiar manualmente las extensiones de archivo apps[0].stylesenangular.json

  1. Apunte los componentes para encontrar sus nuevos archivos de estilo

Cambie el styleUrlsen sus componentes para que coincida con sus nuevos nombres de archivo

Para proyectos futuros

Como mencionó @Serginho, puede configurar la extensión de estilo al ejecutar el ng newcomando

ng new your-project-name --style=scss

Si desea establecer el valor predeterminado para todos los proyectos que cree en el futuro, ejecute el siguiente comando:

ng config --global defaults.styleExt=scss
Elegante
fuente
66
EDITAR: solo necesitaba actualizar el generador en tiempo real. Funciona correctamente
Cristian Traìna
1
@ angular / cli 1.7.3: cambiar defaults.styleExt de cssa scssin .angular-cli.jsonautomáticamente creará archivos scss para cada nuevo componente generado en el futuro.
SimonHawesome
44
ng set defaults.styleExt scss para proyectos existentes
enviado el
9
para angular 6 siga este github.com/angular/angular-cli/wiki/stories-css-preprocessors
hamilton.lima
22
@chovy para la última versión angular de cli, en mi caso (6.0.7) use este comando para proyectos existentes: ng config schematics.@schematics/angular:component.styleext scss según lo dicho por @ hamilton.lima
Farhan
52

A partir de ng6 esto se puede lograr con el siguiente código agregado a angular.jsonnivel raíz:

Cambiar manualmente en .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
Jose Orihuela
fuente
No lo he schematicshecho a nivel raíz, pero anidado dentro de mi proyecto en angular.json. ¿Debería ignorar eso y agregar esto en el nivel raíz?
mcheah
1
@mcheah, sí, así es como está configurado el mío, y está funcionando.
Eric Soyke
Dejé el mío anidado dentro del proyecto y parece que también funciona bien, como un FYI para cualquiera que tenga la misma pregunta.
mcheah
Después de actualizar a las últimas versiones de ng6, mi schematicsahora también está anidado.
José Orihuela
Eso no parece cambiar nada para mí. Todavía no se procesan las reglas de scss en archivos .css.
chovy
34

Abra el archivo angular.json

1.cambiar de

"schematics": {}

a

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. cambio de (en dos lugares)

"src/styles.css"

a

"src/styles.scss"

luego verifique y cambie el nombre de todos los .cssarchivos y actualice los archivos de style.ts styleUrls de.css to .scss

BALA
fuente
44
El paso 1 se puede hacer desde la CLI: ng config schematics.@schematics/angular:component.styleext scss como se especifica en los documentos oficiales: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07
13

Para Angular 6,

ng config schematics.@schematics/angular:component.styleext scss

nota: @ schematics / angular es el esquema predeterminado para la CLI angular

Franklin Pious
fuente
11

Integración de preprocesador CSS para CLI angular: 6.0.3

Al generar un nuevo proyecto, también puede definir qué extensión desea para los archivos de estilo:

ng new sassy-project --style=sass

O establezca el estilo predeterminado en un proyecto existente:

ng config schematics.@schematics/angular:component.styleext scss

Documentación CLI angular para todos los principales preprocesadores CSS

Angel Roma
fuente
1
Invalid JSON character: "s" at 0:0.
chovy
A partir de la CLI angular 6.0.8 ng config(como el anterior) es el mejor método, pero que todavía tienen que cambiar el nombre de *.csslos archivos a *.scssY reemplazar las referencias en angular.jsona style.csscon style.scssy actualizar todas las referencias de archivos componentes en styleUrlspropiedad a los nuevos nombres. ... entonces funciona muy bien!
gkl 21/0618
8

Para proyectos existentes :

En angular.jsonarchivo

  1. En buildparte y en testparte, reemplace:

    "styles": ["src/styles.css"], por "styles": ["src/styles.scss"],

  2. Reemplazar:

    "schematics": {}, por "schematics": { "@schematics/angular:component": { "style": "scss" } },

El uso del ng config schematics.@schematics/angular:component.styleext scsscomando funciona pero no coloca la configuración en el mismo lugar.

En su proyecto, cambie el nombre de sus .cssarchivos a.scss

Para un nuevo proyecto , este comando hace todo el trabajo:

ng n project-name --style=scss

Para configuración global

Parece que las nuevas versiones no tienen un comando global

veben
fuente
6

Use el comando:

ng config schematics.@schematics/angular:component.styleext scss
himanshu sharma
fuente
3

En ng6 necesitas usar este comando, de acuerdo con una publicación similar :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
Jameson Saunders
fuente
3

Para los usuarios de las extensiones Nrwl que se encuentran con este hilo: todos los comandos son interceptados por Nx (por ejemplo, ng generate component myCompent) y luego pasados ​​a AngularCLI.

El comando para que SCSS funcione en un espacio de trabajo de Nx:

ng config schematics.@nrwl/schematics:component.styleext scss

tilo
fuente
Brillante, estaba buscando esto. ¡Gracias!
Ruan Petersen
2

Se puede aplicar un cambio de fuerza bruta. Esto funcionará para cambiar, pero es un proceso más largo.

Vaya a la carpeta de aplicaciones src / app

  1. Abra este archivo: app.component.ts

  2. Cambia este código styleUrls: ['./app.component.css']astyleUrls: ['./app.component.scss']

  3. Guardar y cerrar.

En la misma carpeta src / app

  1. Cambie el nombre de la extensión del archivo app.component.css a (app.component.scss)

  2. Siga este cambio para todos los demás componentes. (ej. hogar, acerca de, contacto, etc.)

El archivo de configuración angular.json es el siguiente. Se encuentra en la raíz del proyecto.

  1. Buscar y reemplazar el css cámbialo a (scss) .

  2. Guardar y cerrar.

Por último, reinicie su ng serve -o.

Si el compilador se queja de usted, repita los pasos nuevamente.

Asegúrese de seguir de cerca los pasos en app / src .

Frank Thoeny
fuente
1

En la última versión de Angular (v9), el siguiente código debe agregar angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Podría agregarse usando el siguiente comando:

ng config schematics.@schematics/angular:component.style scss
Partha Ranjan
fuente
no funciona para mí y estoy tratando de hacerlo más de 10 años
Kross