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 funcionaba, ya que una serie de componentes principales de Angular-CLI se ejecutan fuera de los módulos Ember-CLI.

No funcionó pero, una vez más, no estoy seguro de si configuré algo mal.

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.

Angular CLI versión 9 (utilizada para crear proyectos de Angular 9) ahora se recoge stylede los esquemas en lugar de styleext. Use 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=sassy si no conoce la diferencia, lea este artículo breve y fácil y si aún no lo sabe, simplemente scsscontinúe 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 schematics.@schematics/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 CLI angular, especifique el preprocesador css como

   • Usar sintaxis SCSS

     ng new sassy-project --style=scss
     

   • Usar sintaxis SASS

     ng new sassy-project --style=sass
     

2. Actualización de proyecto existente

   Establecer estilo predeterminado en un proyecto existente ejecutando

   • Usar sintaxis SCSS

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

   • Usar sintaxis SASS

     ng config schematics.@schematics/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 establecer las opciones --style=sasso --style=scsssegún el sabor deseado SASS / SCSS

• Usar sintaxis SASS

  ng new project --style=sass 
  

• Usar 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 con node-sass, tuve que ejecutar,

npm install node-sass --save-dev 

que se 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)

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 del repositorio de Github de los funcionarios aquí:

Para usar uno solo 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 por defecto

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 el indicador 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 mediante el comando:

ng set defaults.styleExt scss

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

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

¡Noté 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

Qué ng hace cuando genera un nuevo proyecto, pero aparentemente no cuando se crea el proyecto predeterminado. Si ve errores de resolución durante la compilación de ng, compruebe este problema. Solo me llevó ~ 1 hora.

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

Luego, 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 usarlo node-sass, instálelo de la siguiente manera:

npm install node-sass --save-dev

y deberías estar listo para ir!

Si usa webpack, lea 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 {}

de arranque angular aquí .

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

get / set ha quedado en desuso a favor del comando config

Deberías usar:

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

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

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

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

Crea 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 de sus archivos componentes)

Convertir un proyecto existente (CLI mayor que 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 "esquemática" de angular.json (generalmente la línea 11):

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

Para Angular 9.0 y superior, actualice el "schematics":{}objeto en el archivo angular.json de esta manera:

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

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

get / set ha quedado en desuso a favor del comando config.

npm install node-sass --save-dev

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

ng config projects.YourPorjectName.schematics.@schematics/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, existe una buena posibilidad de que la configuración no esté allí. En cuyo caso puede 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 vea así (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.

A partir del 10/03/2019, Anguar abandonó el apoyo de sass. No importa a qué opción pasaste --styleal ejecutar ng new, siempre obtienes .scssarchivos generados. Es una lástima que se haya perdido el apoyo sin ninguna explicación.

Establecerlo como predeterminado global

ng set defaults.styleExt=scss --global

Integración del preprocesador CSS La CLI angular admite todos los preprocesadores CSS principales:

Para usar estos preprocesadores, simplemente agregue el archivo a los 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 schematics.@schematics/angular:component.styleext scss

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

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 set defaults.styleExt scss

pero tengo esto

get / set ha quedado en desuso a favor del comando config.

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

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

ng nueva aplicación my-sassy --style = scss

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

Paso 1. Instale el paquete bulma usando npm

npm install --save bulma

Paso 2. Abra angular.json y actualice el siguiente código

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

Eso es.

Para exponer fácilmente las herramientas de Bulma, agregue stylePreprocessorOptions a angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6