Angular-cli de css a scss

Si encuentras alguna incompatibilidad en tu código o proyecto, recuerda probar siempre en un entorno de testing antes aplicar el código al trabajo final.

Solución:

Para Angular 6 consulta la documentación oficial

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

Para proyectos existentes

En un proyecto angular-cli existente que se configuró con el valor predeterminado css estilos tendrá que hacer algunas cosas:

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

Cambiar manualmente en .angular-cli.json (Angular 5.x y anteriores) o angular.json (Angular 6+) o ejecutar:

ng config defaults.styleExt=scss

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

ng config [email protected]/angular:component.styleext scss

(*fuente: opciones angulares CLI SASS)

2. Cambie el nombre de su existente .css archivos a .scss (es decir, estilos.css y app/app.component.css)

3. Apunte la CLI para encontrar estilos.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

Cambiar el styleUrls en sus componentes para que coincidan con sus nuevos nombres de archivo

Para futuros proyectos

Como mencionó @Sergiho, puede configurar la extensión de estilo al ejecutar el ng new mando

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.json a nivel de raíz:

Cambiar manualmente en .angular.json:

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

Abierto angular.json expediente

1.cambiar de

"schematics":

para

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

2. cambiar de (en dos lugares)

"src/styles.css"

para

"src/styles.scss"

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

Agradecemos que quieras confirmar nuestra misión escribiendo un comentario o valorándolo te estamos agradecidos.

---

---

Utiliza Nuestro Buscador