2

我们有一个使用 Angular 11（cli V11.2.14）和 Asp.net 核心开发的 Web 应用程序，运行良好，现在需要在 chrome 旧版本（浏览器版本 60）中得到支持。我遇到了主要与具有颜色和不透明度的元素相关的 CSS 问题，例如。下面的 box-shadow 不起作用。

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

在角度 css 缩小过程中发现（angular.json 中的默认设置 optimization=true），rgba 被转换为 8 位十六进制代码。这适用于最新版本的 chrome（72 及更高版本）。但是像 chrome 60 这样的旧版本不支持 8 位十六进制代码，因此我没有看到 css 生效。目前我只能通过不使用 angular.json 中的以下设置来缩小样式来解决此问题。

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

我正在尝试查看是否有一种方法可以防止将 rgba 转换为 8 位十六进制代码，而不必禁用 css 缩小。尝试在 styles.scss 中使用变量，如下所示，但缩小过程仍将 rgba 转换为 8 位十六进制。

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

遇到在这里发布的类似问题https://github.com/angular/angular-cli/issues/20869说 css nano 团队必须解决这个问题。不确定当前在 angular cli 中是否有任何解决方法。

4

1 回答 1

0

作为一种解决方案，我建议将诸如内联之类的关键样式放入模板中。例如：

<div class="some-class" style: "box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);">
...
</div>
于 2022-02-18T09:49:13.117 回答