Angular-cli de css a scss

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'(…)

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 )

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

3. Apunte la CLI para buscar styles.scss

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

4. 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

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

Abra el archivo angular.json

1.cambiar de

"schematics": {}

a

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

2. 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

Para Angular 6,

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

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

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

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

Use el comando:

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

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

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

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

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 .

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