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 ember-cli-sassrepositorio para ver si funcionaría, ya que varios componentes centrales de Angular-CLI se ejecutan desde los módulos Ember-CLI.

No funcionó, pero no estoy seguro de si configuré mal algo.

Además, ¿cuál es la mejor manera de organizar estilos en un nuevo proyecto de 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 se basa en styleesquemas en lugar de styleext. Use el comando así:
ng config [email protected]/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=sassy si no sabe la diferencia, lea este artículo breve y fácil y si aún no lo sabe, continúe scssy siga 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

   Al generar 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. Actualizar proyecto existente

   Establecer el estilo predeterminado en un proyecto existente ejecutando

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

   donde styleextpuede ser scsso sasssegún la elección.

Respuesta original (para Angular <6)

Proyectos nuevos

Para nuevos proyectos podemos configurar las opciones --style=sasso --style=scsssegú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 angular-clicompilar archivos sass node-sass, tuve que ejecutar,

npm install node-sass --save-dev 

que instala node-sass. Entonces

• 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)

cambiar styleExta sasso scsspara la sintaxis deseada en .angular-cli.json,

• para la sintaxis SASS

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

• para la sintaxis SCSS

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

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

Dile a angular-cli que siempre use scss de forma predeterminada

Para evitar pasar --style scsscada vez que genera un proyecto, es posible que desee ajustar su configuración predeterminada de angular-cli globalmente, con el siguiente comando:

ng set --global defaults.styleExt scss

Tenga en cuenta que algunas versiones de angular-cli contienen un error al leer la bandera global anterior ( ver enlace ). Si su versión contiene este error, genere su proyecto con:

ng new some_project_name --style=scss

Como dijo Mertcan, la mejor manera de usar scss es crear el proyecto con esa opción:

ng new My_New_Project --style=scss 

Angular-cli también agrega una opción para cambiar el preprocesador css predeterminado después de que se haya creado el proyecto usando el comando:

ng set defaults.styleExt scss

Para obtener más información, puede buscar aquí su documentación:

https://github.com/angular/angular-cli

¡Me di cuenta de un problema muy molesto al pasar a archivos scss! Uno DEBE pasar de un simple: styleUrls: ['app.component.scss']a styleUrls: ['./app.component.scss'](agregar ./) enapp.component.ts

Lo que hace cuando genera un nuevo proyecto, pero aparentemente no cuando se crea el proyecto predeterminado. Si ve resolver errores durante la compilación de ng, verifique este problema. Solo me tomó ~ 1 hora.

Lo mejor podría ser ng new myApp --style=scss

Entonces Angular CLI creará cualquier componente nuevo con scss para usted ...

Tenga en cuenta que el uso scssno funciona en el navegador como probablemente sepa ... por lo que necesitamos algo para compilarlo css, por esta razón podemos usar node-sass, instalarlo como se muestra a continuación:

npm install node-sass --save-dev

¡Y deberías estar listo!

Si usa webpack, siga leyendo aquí:

Línea de comando dentro de la carpeta del proyecto donde está su package.json existente: npm install node-sass sass-loader raw-loader --save-dev

En webpack.common.js, busque "reglas:" y agregue este objeto al final de la matriz de reglas (no olvide agregar una coma al final del objeto anterior):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Luego, en su componente:

@Component({
  styleUrls: ['./filename.scss'],
})

Si desea compatibilidad con CSS global, en el componente de nivel superior (probablemente app.component.ts) elimine la encapsulación e incluya el SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

desde Angular starter aquí .

ng set --global defaults.styleExt=scssestá en desuso desde ng6. Recibirá este mensaje:

get / set han quedado obsoletos a favor del comando config

Deberías usar:

ng config [email protected]/angular:component '{ styleext: "scss"}'

Si desea apuntar a un proyecto específico (reemplace {proyecto} con el nombre de su proyecto):

ng config projects.{project}[email protected]/angular:component '{ styleext: "scss"}'

Angular-CLI es el método recomendado y es el estándar en la comunidad Angular 2+.

Crete un nuevo proyecto con SCSS

ng new My-New-Project --style=sass

Convertir un proyecto existente (CLI menor que v6)

ng set defaults.styleExt scss

(debe cambiar el nombre de todos los archivos .css manualmente con este enfoque, no olvide cambiar el nombre en sus archivos de componentes)

Convertir un proyecto existente (CLI superior a v6)

1. cambie el nombre de todos los archivos CSS a SCSS y actualice los componentes que hacen referencia a ellos.
2. agregue lo siguiente a la clave "esquemas" de angular.json (generalmente línea 11):

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

Para Angular 9.0 y superior, actualice el "schematics":{}objeto en el archivo angular.json como este:

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

Lo siguiente debería funcionar en un proyecto CLI 6 angular. Es decir, si obtiene:

get / set han quedado obsoletos en favor del comando config.

npm install node-sass --save-dev

Luego ( asegurándose de cambiar el nombre del proyecto )

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

Para obtener su nombre de proyecto predeterminado, use:

ng config defaultProject

Sin embargo: si ha migrado su proyecto desde <6 hasta angular 6, es muy probable que la configuración no esté allí. En cuyo caso, podría obtener:

Carácter JSON no válido: "s" en 0: 0

Por lo tanto angular.json, se requerirá una edición manual de .

Querrá que se parezca a esto (tomando nota de la propiedad styleex):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Me parece un esquema demasiado complejo. ¯_ (ツ) _ / ¯

Ahora tendrá que ir y cambiar todos sus archivos css / less para que sean scss y actualizar cualquier referencia en componentes, etc., pero debería estar listo para comenzar.

A partir del 10/3/2019, Anguar abandonó el apoyo del descaro. Independientemente de la opción a la que haya pasado --styleal ejecutar ng new, siempre se .scssgeneran archivos. Es una pena que el apoyo descarado se haya abandonado sin ninguna explicación.

Establecerlo como predeterminado global

ng set defaults.styleExt=scss --global

Integración del preprocesador de CSS Angular CLI admite todos los preprocesadores de CSS principales:

Para usar estos preprocesadores, simplemente agregue el archivo a las styleUrls de su componente:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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 [email protected]/angular:component.styleext scss

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

Las cadenas de estilo agregadas a la matriz @ Component.styles deben escribirse en CSS porque la CLI no puede aplicar un preprocesador a los estilos en línea.

Basado en documentación angular https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Traté de actualizar mi proyecto para usar el sass usando este comando

ng establece valores predeterminados.styleExt scss

pero tengo esto

get / set han quedado obsoletos en favor del comando config.

• CLI angular: 6.0.7
• Nodo: 8.9.0
• SO: linux x64
• Angular: 6.0.3

Así que eliminé mi proyecto (ya que estaba comenzando y no tenía código en mi proyecto) y creé uno nuevo con sass inicialmente configurado

ng nueva my-sassy-app --style = scss

Pero agradecería si alguien pudiera compartir una forma de actualizar el proyecto existente, ya que sería bueno.