Opciones de Angular CLI SASS

Solución:

CLI angular versión 9 (usado para crear proyectos de Angular 9) ahora retoma style de esquemas en lugar de styleext. Utilice el comando así:
ng config [email protected]/angular:component.style scss
y el resultante angular.json se verá así

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

Otras posibles soluciones y explicaciones:

Para crear un nuevo proyecto con CLI angular con el apoyo de Sass, intente esto:

ng new My_New_Project --style=scss 

También puedes usar --style=sass Y si no sabe la diferencia, lea este artículo breve y fácil y si aún no lo sabe, simplemente siga scss & seguir aprendiendo.

Si tiene un proyecto angular 5, use este comando para actualizar la configuración de su proyecto.

ng set defaults.styleExt scss

Para las últimas versiones

Para que Angular 6 establezca un nuevo estilo en un proyecto existente con CLI:

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

O directamente en angular.json:

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

Actualización para Angular 6+

1. Proyectos nuevos

   Cuando generando un nuevo proyecto con Angular CLI, especifique el preprocesador css como

   • Utilice la sintaxis SCSS

     ng new sassy-project --style=scss
     

   • Utilice la sintaxis de SASS

     ng new sassy-project --style=sass
     

2. Actualización del proyecto existente

   Establecer estilo predeterminado en un proyecto existente mediante la ejecución

   • Utilice la sintaxis SCSS

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

   • Utilice la sintaxis de SASS

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

   El comando anterior actualizará su archivo de espacio de trabajo (angular.json) con

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

   dónde styleext pueden ser cualquiera de los dos scss o sass según la elección.

---

Respuesta original (para Angular <6)

Proyectos nuevos

Para nuevos proyectos podemos configurar las opciones --style=sass o --style=scss según el sabor deseado SASS / SCSS

• Utilice la sintaxis de SASS

  ng new project --style=sass 
  

• Utilice la sintaxis SCSS

  ng new project --style=scss 
  

luego instalar node-sass,

npm install node-sass --save-dev

---

Actualización de proyectos existentes

Para hacer angular-cli para compilar archivos sass con node-sass, Tuve que correr,

npm install node-sass --save-dev 

que instala node-sass. Luego

• para la sintaxis SASS

  ng set defaults.styleExt sass
  

• para la sintaxis SCSS

  ng set defaults.styleExt scss
  

para establecer el estilo predeterminadoExt a sass

(o)

cambio styleExt para sass o scss para la sintaxis deseada en .angular-cli.json,

• para la sintaxis SASS

  "defaults": {
       "styleExt": "sass",
  }
  

• para la sintaxis SCSS

  "defaults": {
       "styleExt": "scss",
  }
  

---

Aunque generó errores de compilación.

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

que se solucionó cambiando las líneas de .angular-cli.json,

"styles": [
        "styles.css"
      ],

a cualquiera,

• para la sintaxis SASS

  "styles": [
          "styles.sass"
        ],
  

• para la sintaxis SCSS

  "styles": [
          "styles.scss"
        ],
  

Citado de Officials github repo here –

Para usar uno, simplemente instale, por ejemplo

npm install node-sass

y cambie el nombre de los archivos .css en su proyecto a .scss o .sass. Se compilarán automáticamente. El argumento de opciones de Angular2App tiene opciones sassCompiler, lessCompiler, stylusCompiler y compassCompiler que se pasan directamente a sus respectivos preprocesadores CSS.

Mira aquí

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

---

---

Utiliza Nuestro Buscador