cli - page title angular 4

Opciones de CLI SASS angular

Question

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

Answer 1

Actualización para Angular 6+

1. Proyectos nuevos

   Al generar un nuevo proyecto con Angular CLI, 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 styleext puede ser scss o sass según la elección.

Respuesta original (para Angular <6)

Proyectos nuevos

Para nuevos proyectos podemos establecer las opciones --style=sass o --style=scss acuerdo con el sabor deseado SASS / SCSS

• Usar sintaxis SASS

  ng new project --style=sass 

• Usar sintaxis SCSS

  ng new project --style=scss 

luego instale 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 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 por defecto de texto a sass

(o)

cambie styleExt a sass o scss para obtener 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"
        ],

Answer 2

Dile a angular-cli que siempre use scss por defecto

Para evitar pasar --style scss cada 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

Answer 3

¡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''] (add ./ ) en app.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.

Answer 4

A partir del 10/03/2019, Anguar abandonó el apoyo de sass. No importa a qué opción .scss cuando ejecutas ng new , siempre obtienes archivos .scss generados. Es una lástima que el apoyo sass se haya eliminado sin ninguna explicación.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

Cuando esté creando su proyecto con cli angular intente esto:

ng new My_New_Project --style=sass 

Esto genera todos sus componentes con archivos sass predefinidos.

Si desea la sintaxis de scss, cree su proyecto con:

ng new My_New_Project --style=scss

Si está cambiando su estilo existente en su proyecto

ng set defaults.styleExt scss

Cli se encarga del resto.

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

Answer 9

Establecerlo como predeterminado global

ng set defaults.styleExt=scss --global

Answer 10

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

Answer 11

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 de scss no funciona en el navegador como probablemente lo sepa ... por lo que necesitamos algo para compilarlo en css , por esta razón podemos usar 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 "rules:" 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 here .

Answer 12

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, se requerirá una edición manual de angular.json .

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.

Answer 13

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

Answer 14

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.

Answer 15

ng set --global defaults.styleExt=scss está 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"}''