scss - sass angular 5

¿Cómo agrego la compilación de Sass en Angular CLI 6: angular.json?

Question

Acabo de crear un nuevo proyecto Angular utilizando el nuevo Angular CLI 6.0, pero necesito agregar la compilación de Sass a mi proyecto. Soy consciente de que puede establecer una bandera cuando crea un proyecto, pero mi proyecto ya está creado y se ha trabajado.

El nuevo archivo de configuración que se genera con la nueva CLI angular ahora se llama angular.json lugar de angular-cli.json . El esquema para el archivo también es diferente, con nuevas propiedades.

En el antiguo angular-cli.json hay una sección donde puedes configurar el stylExt así.

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

pero no estoy seguro de dónde colocar exactamente esto, ya que después de las propiedades de "test" y "lint" , da un error de pelusa de:

Matches multiple schemas when only one must validate.

y la edificación produce:

Schema validation failed with the following errors: Data path "[''defaults'']" should NOT have additional properties(styleExt).

En cuanto a los documentos de CLI, no veo nada que indique dónde colocar "styleExt" .

He visto otras respuestas que aconsejan: ng set defaults.styleExt scss cuyos lanzamientos get/set have been deprecated in favor of the config command. .

Intenté ng config set defaults.styleExt scss y npm config set defaults.styleExt scss El primero npm config set defaults.styleExt scss un error y este último aparentemente no tuvo efecto en el archivo, pero sin error.

Answer 1

En Angular 6, es más fácil que eso. La compilación se maneja automáticamente! Cómo esa ? Para usar scss a nivel de componentes, debe asignar un nombre al archivo con la extensión scss (lo mismo vale menos, styl ). Y en tu componente, también cambias el estilo correspondiente a scss .

Aquí una captura de pantalla del doc:

Y para usar Scss a escala global (src / styles.css), entonces necesita cambiar styles.css a styles.scss (lo mismo por menos, styl ... etc). Y luego vas en angular.json y cambias los viejos styles.css al nuevo valor de styles.scss. Como se muestra en la siguiente imagen:

Aquí está el enlace para el documento de la primera parte para los que desean explorarse a sí mismos: https://angular.io/guide/component-styles#non-css-style-files

Ahora, ¿qué pasa con la configuración, ng-cli para que al generar un nuevo componente la extensión sea por defecto scss? Use el comando ng config como sigue:

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

Eso actualizará angular.json con:

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

Que es el equivalente al antiguo angular-cli.json.

    defaults: {
        "styleext": "scss"
    }

Eso es para un proyecto que ya se inició pero no está configurado como predeterminado en scss. Si está creando un nuevo proyecto, use la opción --style para especificarlo de la siguiente manera:

ng new my-project --style=scss

Y no tendrá que usar el comando precedente, que es un comando de configuración que nos permite actualizar el campo especificado en el archivo angular.json (porque ya estará configurado).

Answer 2

Haciendo exactamente lo que Smokey Dawson comentó ,

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

Lo anterior es el resultado. Entonces, en su aplicación, debajo de los schematics teclas, agregue una clave @schematics/angular:component con el estilo de clave establecido en scss .

Esto debe aplicarse a su archivo angular.json en el directorio raíz de su proyecto.