Opciones de CLI SASS angular

329

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.

JDillon522
fuente
3
Puede echar un vistazo a cómo se usa en github.com/angular/material2, por ejemplo, el componente del botón github.com/angular/material2/tree/master/src/components/button
Günter Zöchbauer

Respuestas:

544

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"
    }
}
Mertcan Diken
fuente
17
Luego puede cambiarlo de angular.cli.json en este archivo hay "valores predeterminados": {"styleExt": "css", "prefixInterfaces": false, "inline": {"style": false, "template": falso} Puede cambiar el estiloExt
Mertcan Diken
145
ng set defaults.styleExt scss
Sebas
44
no se olvide de cambiar la stylepropiedad a scssen.angular-cli.json
OST
3
ng set defaults.styleExt scss --global
JoshuaDavid
29
Para Angular 6 establecer un nuevo estilo en el proyecto existenteng config schematics.@schematics/angular:component.styleext scss
Nehal Damania
344

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


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"
          ],
    
Todo es variado
fuente
3
Lo único que me causó problemas fue que en angular-cli.jsonrealidad es así .angular-cli.json. Una vez que me di cuenta de esto, lo edité y esto está funcionando perfectamente. Gracias.
OldTimeGuitarGuy
@OldTimeGuitarGuy Gracias por señalarlo, el archivo una vez nombrado angular-cli.jsonfue cambiado como un archivo oculto ( .angular-cli.json) recientemente (rc2). Fijo.
Todo será el
Si cambia el nombre de un .cssarchivo existente , es posible que deba cerrarlo y volver a abrirlo en su editor para que reconozca correctamente la sintaxis sass. Esto es cierto incluso con el último Visual Studio,
Simon_Weaver
1
Para angular 6 node-sass ya está instalado, por lo que no es necesario instalarlo.
Destruye todo el
1
Tengo la misma configuración, pero importar archivos scss directamente a componentes no funciona, mientras que importarlos a styles.scss funciona bien. Estoy usando angular cli verison 7+, ¿hay algún error?
Hemant Sankhla
37

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í

regnar
fuente
55
es posible que desee agregar --save-dev, no estoy seguro de por qué no está en los documentos de esa manera, pero lo perdimos cuando realizamos una actualización y luego no podía entender por qué nuestros estilos se habían ido
regnar
2
Hubo un problema por el que también se estaban compilando archivos sass con guiones bajos, pero se corrigió a partir de angular-cli 1.0.0-beta.9
Andy Ford
26

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
Michael P. Bazos
fuente
Estoy en angularCLI v. 1.2.1 (más reciente, a partir de julio de 2017) y tengo el error que describiste. me encontré este comando, y parece funcionar a la perfección para los nuevos componentes de forma predeterminada, pero los nuevos proyectos todavía elaboran app.component.css si no especifico--style=scss
Jeremy Moritz
21

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

Jared Wadsworth
fuente
3
ng setno parece funcionar en la configuración de la appsmatriz. P.ej. ng set apps.prefix blahlanza un "token inesperado b en JSON en la posición 0".
im1dermike
15

¡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.

JoelParke
fuente
3
esto está en app.component.ts para aquellos que son demasiado flojos para buscar :)
incorpore
5

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í .

Alireza
fuente
5

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"}'
aloisdg se muda a codidact.com
fuente
3

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

Edodso2
fuente
3

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

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
Mahozad
fuente
Gracias, me preguntaba por qué no funcionó y resulta que styleahora lo renombraron
Dino,
2

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.

Neil Watson
fuente
2

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.

Solo un alumno
fuente
1
Para cualquiera que tenga dificultades con esto después del 10/03/2019: Angular reintrodujo el soporte sass para angular-cli en 8.0.0-beta.5 y pronto debería volver a la rama de lanzamiento principal. Puede instalar la versión preliminar connpm install -g @angular/[email protected]
mkrl
Interesante. Gracias por recordar. Solo por curiosidad, ¿sabes por qué abandonaron el soporte en primer lugar?
Solo un alumno
Aparentemente, el equipo de Angular se refería a ella como una sintaxis "ya no relevante", al menos eso es lo que el miembro del equipo central declaró en este RP, no pudo encontrar más información sobre esto.
mkrl
1

Establecerlo como predeterminado global

ng set defaults.styleExt=scss --global

Sajith Mantharath
fuente
0

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

Victor Hugo Arango A.
fuente
0

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.

Junaid
fuente
alguien ha respondido esto para los proyectos existentes de Angular 6 aquí
padigan
0

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

BALA
fuente
eso está completamente fuera del estándar angular, y usar scss es solo un efecto secundario del uso de bulma
netalex