CSS 变量有时在浏览器中全部小写，但在 Variables.css 文件中为驼峰大小写

Question

我们有一个 Web 应用程序，我们刚刚实现了 CSS 变量。这些变量在variables.css 文件中定义并且在文件中是驼峰大小写。当用户在托管网站的同一网络上时，一切正常。当用户在网络之外并从 Internet 访问 Web 应用程序时，变量以全小写形式发送到浏览器，这不会应用所需的样式，因为变量在控件上是驼峰大小写（使用 Chrome 调试器验证）但现在发送到浏览器的变量中的小写字母。如果我打开 Chrome 调试器并将变量名称更改回驼峰大小写版本，则会应用样式。

这是一种非常奇怪的行为，我无法理解是什么导致变量以全小写形式发送到浏览器。

任何帮助将不胜感激。

谢谢！

variables.css：

:root {
    --primaryButtonBackgroundColor: #6c757d;
    --primaryButtonTextColor: white;
    --primaryButtonHoverBackgroundColor: #5a6268;
    --primaryButtonHoverTextColor: white;
}

页面中的 ASP.NET 样式（Chrome 调试器）：

.btn-primary {
    background-color: var(--primaryButtonBackgroundColor) !important;
    color: var(--primaryButtonTextColor) !important;

渲染变量（Chrome 调试器）：

:root {
    --primarybuttonbackgroundcolor: #6c757d;
    --primarybuttontextcolor: white;
    --primarybuttonhoverbackgroundcolor: #5a6268;
    --primarybuttonhovertextcolor: white;
}

编辑：我们注意到 variables.css 文件是我们拥有的唯一一个在使用 Chrome 调试器查看源代码时被缩小的 css 文件，但这只发生在应用程序服务器网络之外。

Answer 1

问题是他们有一些软件 (Imperva) 监控他们的网站，这些软件会自动缩小 CSS 文件并在发送到浏览器之前更改文件。