Tenemos una aplicación web que se desarrolló en Angular 11 (cli V11.2.14) y Asp.net core y funciona bien, ahora debe ser compatible con la versión anterior de Chrome (navegador versión 60). Me encontré con problemas de css principalmente relacionados con elementos con color y opacidad como, por ejemplo. debajo de box-shadow no funciona.

 box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);

Descubierto durante el proceso de minificación de css angular (optimización de configuración predeterminada = verdadero en angular.json), el rgba se convierte en un código hexadecimal de 8 dígitos. Esto funciona con versiones recientes de Chrome (72 y superiores). Pero la versión anterior, como Chrome 60, no es compatible con el código hexadecimal de 8 dígitos, por lo tanto, no veo que el css entre en vigencia. Actualmente puedo solucionar este problema solo al no minimizar los estilos con la configuración a continuación en angular.json.

 "optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": true }, "fonts": true },

Estoy tratando de ver si hay una manera de evitar la conversión de rgba a un código hexadecimal de 8 dígitos sin tener que deshabilitar la minificación de css. Intenté usar la variable en styles.scss como a continuación, pero el proceso de minificación aún convierte rgba en hexadecimal de 8 dígitos.

 $my-shadow-red: #{'0px 4px 16px 4px rgba(255, 0, 0, 0.52)'}; box-shadow: $my-shadow-red;

Encontré un problema similar publicado aquí https://github.com/angular/angular-cli/issues/20869 que dice que el equipo css nano tiene que abordar esto. No estoy seguro de si hay alguna solución actualmente dentro de angular cli.