Thymeleaf从模型对象设置CSS变量时出现反斜杠转义问题

问题根源 #

开启th:inline="css"后，Thymeleaf会自动转义CSS中的特殊字符（比如颜色值里的#），这就是生成的代码里多出反斜杠的原因。

解决方式 #

直接使用Thymeleaf的无转义表达式语法，把原模板里的[[${...}]]替换成[(${...})]，该语法会原样输出变量值，不做任何转义。修改后的模板代码如下：

<style th:inline="css">
    :root {
        --accent-color: [(${appUser?.accentColorCode} ?: '#ea0a8e')];
    }
</style>

验证效果 #

修改后生成的CSS会正常显示，不会带有多余的反斜杠：

:root {
    --accent-color: #00FF00;
}

内容的提问来源于stack exchange，提问作者LoginAsRoot