Después de actualizar de Angular 11 a 12, ng serve ahora arroja un error:
Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/_colors.scss:1:4: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/custom-bootstrap.scss:1:1: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/global.scss:296:12: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/mdsl-composer/mdsl-composer-variables.scss:103:1: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser Ninguno de los archivos SCSS en cuestión está haciendo algo especial. _colors.scss por ejemplo es simplemente:
// Bootstrap Overrides $text-secondary: #2E93B1; $text-muted: #ccc; $link-color: #2E93B1; .text-secondary { color: $text-secondary !important; } // LabCorp UI Overrides $theme-colors: ( 'primary': #003A70, 'secondary': #2E93B1, 'success': #155724, 'danger': #790E1D, 'warning': #C59C38, 'info': #007A6E, 'light': #EDF1F4, 'dark': #0B1519, ); // UI design colors $primary: #007FA3; $highlighted: #D57800; $accent: #5F456F; $accent-secondary: #808080; $related: #D1EAF1; Así que no estoy seguro de qué Unknown word se queja el analizador.
No encuentro mucha información en línea sobre este error con Angular.
El resto del código del proyecto se compilará como se esperaba, pero ahora la aplicación no se ejecutará. No estoy seguro de qué otro código proporcionar aquí, pero estoy más que feliz de publicar lo que sea útil para la depuración.
El error es específico de Angular CLI. Nuestro proyecto utiliza Angular Universal y construye el código y lo entrega a través del trabajo de Node como se esperaba.
Creé un nuevo proyecto usando Angular CLI 12.0.0 y luego copié partes de angular.json que faltaban o eran diferentes de mi proyecto.
En esta aplicación, fue:
"projects": { "schematics": { "@schematics/angular:application": { "strict": true } }, ..., "architect": { "build": { "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "200kb", "maximumError": "1024kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "mdsl-authoring:build:production" }, "development": { "browserTarget": "mdsl-authoring:build:development" } }, "defaultConfiguration": "development" } } ahora ng serve funciona como se esperaba. Entonces, si está actualizando, asegúrese de verificar las diferencias entre los archivos angular.json en un nuevo proyecto y el suyo.
/assets Tengo mi archivo principal styles.scss que hace referencia a otros archivos...
@use '~@angular/material' as mat; @import 'assets/preload/preload'; // this is preload.scss Como puede ver, uno de los archivos está en assets . Esto se debe a que originalmente se incluyó directamente en el archivo index.html (para mayor velocidad). Con esta nueva e ingeniosa característica en línea que usa bichos , quería que estuviera en línea usando la configuración de optimización predeterminada.
SASS admite oficialmente ambos estilos comunes de comentarios , incluidos // . Sin embargo, el css normal (y el analizador css estándar) no lo hace.
Mi archivo preload.scss contiene algunos // comentarios de estilo. Esto está absolutamente bien cuando se importa en styles.scss con @import porque todo se procesa a través del compilador sass y // los comentarios están bien.
Sin embargo (y no estoy seguro exactamente por qué) el analizador postcss-scss está buscando archivos scss dentro de /assets . Encuentra un estilo de comentario no válido y explota. Creo que solo ng serve hace esto.
La solución para mí fue simplemente mover el archivo preload.scss a la misma ubicación que mis otros archivos. Con suerte, si tiene este mismo problema, la solución será la misma.
ng serve carga y procesa cada archivo en activos (puede verlo haciendo esto si habilita el modo detallado). No estoy seguro exactamente * de lo que está haciendo tbh, pero es en esa fase cuando falla. Y lo hace incluso si no está referenciado por nada.optimization/minify , también tiene éxito con ng serve . Solo en la minificación se ejecuta post-css .Como dices, el problema es tener archivos sass/scss en la carpeta de activos.
En lugar de sacar estos archivos de la carpeta de activos, puede simplemente ignorarlos.
En angular.json, cambie
"assets": [ "src/favicon.ico", "src/assets", ... ]para
"assets": [ "src/favicon.ico", { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.scss"], "output": "/assets/" }, ... ]Estaba luchando con este mismo problema. Primero necesitaba agregar esto:
npm --save install postcss-scsshttps://www.npmjs.com/package/postcss-scss
y crear el
postcss.config.js
archivo en la raíz del proyecto.
agregar
module.exports = { syntax: 'postcss-scss', };lo más importante no se olvide de hacer
npm audit fix --forceahora puedes ng build o ng serve
esto debería corregir el error angular 12 actual.
Tengo el mismo problema que tú, pero no pude solucionarlo con tu ejemplo.
esto ocurre cuando actualizo el paquete @angular-devkit/build-angular de la versión "^ 0.1000.2" a "^12.0.2"
assets/scss/fix.scss - Error: assets/scss/fix.scss from Css Minimizer D:\home\admin-pref-new\assets\scss\fix.scss:169:6: Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser [assets/scss/fix.s css:169,6] You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parsercomentarios en archivos scss
// ng-select para manter a mesma cor do boostrap .ng-select { &.ng-select-disabled { > .ng-select-container { background-color: #E3E3E3 !important; } } }Para aquellos de ustedes que encuentren esto justo después de actualizar a Angular 12, asegúrese de leer detenidamente la Guía de actualización de Angular 12 .
La sección correspondiente es:
La inserción de CSS crítico ahora está habilitada de forma predeterminada. Para desactivar esto, establezca inlineCritical en false. Consulte PR #20096 y la sección de opciones de preprocesador de estilo de la configuración del espacio de trabajo angular.
Lo que está haciendo en realidad es mirar su archivo index.html e inspeccionar las entradas de la hoja de estilo, y luego tratar de incluirlas en la fuente.
Como algunos otros han dicho, configurar la optimization: false puede resolver el problema, ¡pero supongo que no le hizo ningún favor al tamaño de su paquete con ese!
En su lugar, puede cambiar inlineCritical a false , lo que puede hacer configurando algo como esto. Ver la configuración completa para la optimización .
"optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true } Otro cambio posiblemente relevante en Angular 12 es la opción inlineStyleLanguage .
He investigado este problema desde que últimamente estaba migrando un proyecto de tamaño mediano de v11 a v12 .
El problema es que tiene sus archivos .scss en la carpeta de assets que básicamente está destinado a que los activos se copien tal cual. No debe ser procesado por algún tipo de preprocesador scss.
Fuente https://angular.io/guide/workspace-config#asset-config
... carpetas que desea copiar tal como están al crear su proyecto.
Sin embargo, los archivos en la carpeta de activos se minimizan y de ahí proviene la excepción. Durante la versión anterior, estos archivos probablemente fueron preprocesados y esa es la razón por la cual este problema no ha surgido hasta ahora.
La solución es mover sus archivos scss globales fuera de la carpeta de activos. Además, puede enumerarlos en angular.json ( propiedad de styles ) si es necesario.
Enfrenté el mismo error, y mi solución fue cambiar el archivo angular.json , específicamente la sección de projects -> "angular_name" -> architect -> configurations -> production -> optimization . Inicialmente, el valor de optimización era optimization:true , así que cambié la sección de optimización a esto:
"optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": true }, "fonts": true }, Como puede ver, la opción minify se configuró en false . Después de cambiar esto, todo comenzó a funcionar.
Consulte este enlace para obtener más detalles sobre la optimization https://angular.io/guide/workspace-config#optimization-configuration
Mover el directorio de estilos ofensivos a includePaths de stylePreprocessorOptions fue el truco para mí.
"stylePreprocessorOptions": { "includePaths": [ "src/assets" ] },Tenía el mismo problema. La forma en que logré resolverlo fue corrigiendo los errores de sintaxis del antiguo Scss al nuevo Scss.
Toma algo de tiempo, pero al final, todo valió la pena.
(Tenía un código de 2017 que necesitaba usar en Angular 12)
Angular 12
Agregue este código arriba de "fileReplacements" para cada configuración de entorno en angular.json
"buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true,ejemplo:
"configurations": { "staging": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true, "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.testing.ts" }] }, "testing": {}, "local": {} }Por mi parte fue porque tenia mal el codigo scss. Por ejemplo, configuración de variable incorrecta.