css - Thymeleaf 模板通过转义 CSS 文件中的井号来解析模型属性

Question

当我尝试使用 Thymeleaf 将一些基本 CSS 加载到我的 css 文件中时，Thymeleaf 可以完成工作，但是当我使用特殊字符(如 # 和任何形式的括号)时，它会被\

转义

我现在想做的就是动态获取一个 HEX 颜色值(在本例中是一个 SQL 数据库)并将其加载到我的 CSS 文件中。

注意:我对 Spring MVC 和 Thymeleaf 还很陌生，所以我可能在不知道它就是解决方案的情况下忽略了一个可能的解决方案。

我理解为什么 Thymeleaf 觉得它应该转义这些字符，因为当涉及到 html 和 xhtml 时，它们可能会产生很大的问题，但这是 CSS，只需要按原样插入原始文本。

我自己使用了 HTML 实体并编码了井号 (#)，但它在 CSS 中不起作用，我也觉得这不是最好的解决方案，即使它是: HTML 实体(十进制)# HTML 实体(十六进制)#

我也采用了 Javascript 路线来解析模板，但它不适用于 CSS。

我的 .css 文件中的 CSS 类:

.bgMainColor{
    background-color:/*[[${styleProperties.Main_Color}]]*/ pink;
}

在我的 JAVA Controller 中，我将模型属性设置如下:

model.addAttribute("styleProperties", properties);

注意:属性包含样式属性列表，如 Main_Color。 Controller 中的所有内容都可以正常工作，Thymeleaf 在将模型传递给 CSS 文件时可以理解，并且插入了 css 但不正确。

然后 CSS 将呈现为:

.bgMainColor{
    background-color: \#1BC6B4;
}

1BC6B4 是从数据库中以原始文本形式检索的字符串。

当然，由于显而易见的原因，这不起作用。

我到处搜索，找不到有效的解决方案。必须有一种方法可以“告诉”Thymeleaf 正在解析的模板是 CSS 而不是 html。

如果有人能提供解决方案，或者能为我指明正确的方向，让我像自己完成工作一样进行 self 教育，我将不胜感激。

Answer 1

我认为 Thymeleaf 试图将您的 CSS 转义为 CSS 标识符。

也就是说，您可以简单地将表达式从转义形式 /*[[${...}]]*/ 更改为非转义形式 /*[($ {...})]*/ 并且它不会转义您的颜色代码。

.bgMainColor{
    background-color: /*[(${styleProperties.Main_Color})]*/ pink;
}