javascript - styleext - Angular-cli de css a scss

sass angular cli 6

Question

He leído la documentation , que dice que si quiero usar scss tengo 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''(…)

¿Cómo puedo solucionar esto?

Answer 1

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

Cambiar manualmente en .angular.json :

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

Answer 2

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 archivos .css y actualice los archivos de style.ts styleUrls de .css to .scss

Answer 3

En ng6 necesitas usar este comando, de acuerdo con una post similar:

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

Answer 4

Para Angular 6,

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

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

Answer 5

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 pasan a AngularCLI.

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

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

Answer 6

Usar comando:

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

Answer 7

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

Answer 8

Para Angular 6 verifique la documentación oficial

Nota: Para versiones @angular/cli anteriores a 6.0.0-beta.6 use ng set en lugar de ng config .

Para proyectos existentes

En un proyecto angular-cli existente que se configuró con los estilos css 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. usa el comando:

ng esquemas de configuración. @ schematics / angular: component.styleext scss

(* fuente: opciones de CLI SASS angular )

2. Cambie el nombre de sus archivos .scss 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 en apps[0].styles en angular.json

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

Cambie los styleUrls en sus componentes para que coincidan con sus nuevos nombres de archivo

Para proyectos futuros

Como mencionó @Serginho, puede establecer la extensión de estilo al ejecutar el comando ng new

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

Answer 9

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. Cambie este código styleUrls: [''./app.component.css''] a styleUrls: [''./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, sobre, 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 .