Soy nuevo en Angular y vengo de la comunidad Ember. Intentando usar el nuevo Angular-CLI basado en Ember-CLI.
Necesito saber la mejor manera de manejar SASS en un nuevo proyecto Angular. Intenté usar el repositorio ember-cli-sass para ver si funcionaba, ya que varios componentes centrales de Angular-CLI se ejecutan fuera de los módulos Ember-CLI.
No funcionó, pero de nuevo no estoy seguro de si configuré mal algo.
Además, ¿cuál es la mejor manera de organizar estilos en un nuevo proyecto Angular? Sería bueno tener el archivo sass en la misma carpeta que el componente.
La versión 9 de Angular CLI (utilizada para crear proyectos de Angular 9) ahora toma el
stylede los esquemas en lugar destyleext. Usa el comando así:
ng config schematics.@schematics/angular:component.style scss
y el angular.json resultante se verá así"schematics": { "@schematics/angular:component": { "style": "scss" } }
Otras posibles soluciones y explicaciones:
Para crear un nuevo proyecto con CLI angular con soporte sass, intente esto:
ng new My_New_Project --style=scss También puede usar --style=sass y si no conoce la diferencia, lea este breve y fácil artículo y, si aún no lo sabe, simplemente scss y siga aprendiendo.
Si tiene un proyecto angular 5, use este comando para actualizar la configuración de su proyecto.
ng set defaults.styleExt scssPara las últimas versiones
Para que Angular 6 establezca un nuevo estilo en un proyecto existente con CLI:
ng config schematics.@schematics/angular:component.styleext scssO directamente en angular.json:
"schematics": { "@schematics/angular:component": { "styleext": "scss" } }Al generar un nuevo proyecto con Angular CLI, especifique el preprocesador css como
Usar sintaxis SCSS
ng new sassy-project --style=scssUsar sintaxis SASS
ng new sassy-project --style=sassEstablezca el estilo predeterminado en un proyecto existente ejecutando
Usar sintaxis SCSS
ng config schematics.@schematics/angular:component.styleext scssUsar sintaxis SASS
ng config schematics.@schematics/angular:component.styleext sassEl comando anterior actualizará su archivo de espacio de trabajo (angular.json) con
"schematics": { "@schematics/angular:component": { "styleext": "scss" } } donde styleext puede ser scss o sass según la elección.
Citado del repositorio oficial de github aquí:
Para usar uno, simplemente instálelo, por ejemplo.
npm install node-sassy cambie el nombre de los archivos .css en su proyecto a .scss o .sass. Se compilarán automáticamente. El argumento options de Angular2App tiene las opciones sassCompiler, lessCompiler, stylusCompiler y compassCompiler que se pasan directamente a sus respectivos preprocesadores CSS.
Mira aquí