如何在JSF的CSS资源中通过EL表达式引用Managed Bean属性

原生静态CSS本身不支持直接读取服务端托管Bean的属性、也无法调用Bean方法，二者运行环境完全隔离：CSS运行在客户端浏览器，托管Bean是运行在服务端的组件，静态CSS文件默认不会被服务端解析执行，因此你写的@import "themes/#{bean.getTheme}";在静态CSS里只会被当成普通字符串处理，不会被替换为实际的主题值。

要实现动态主题导入，可以参考以下几种常用方案：

• 方案1：服务端模板渲染CSS内容
  把需要动态生成的CSS逻辑放到页面的内联<style>标签中，或者将CSS文件配置为服务端模板引擎的解析资源，直接使用框架支持的表达式注入Bean属性。
  例如基于JSF/Facelets框架时，直接在页面内写如下代码即可生效：

  <style>
    @import "themes/#{bean.getTheme}";
    h1 {
      color: var(--mainColor);
    }
  </style>
  

  如果使用Thymeleaf等其他模板引擎，替换为对应模板表达式即可，比如${bean.theme}。
• 方案2：前端动态插入CSS导入规则
  先在页面层从托管Bean获取到当前选中的主题值，传递给前端JS变量，再通过JS动态创建样式规则加载对应主题。
  示例代码：

  <!-- 页面内先从Bean获取主题值存入JS变量 -->
  <script>
    const currentTheme = '#{bean.getTheme}';
    // 动态创建样式节点插入主题导入
    const styleNode = document.createElement('style');
    styleNode.textContent = `@import "themes/${currentTheme}";`;
    document.head.appendChild(styleNode);
  </script>
  

• 方案3：动态覆盖CSS变量（无需切换导入文件）
  如果主题仅为CSS变量的差异，也可以直接把主题对应的变量值从Bean传递到前端，通过JS直接注入到全局:root中，无需加载不同的主题CSS文件：

  <script>
    // 从Bean获取当前主题的变量值
    const mainColor = '#{bean.currentTheme.mainColor}';
    // 全局注入CSS变量
    document.documentElement.style.setProperty('--mainColor', mainColor);
  </script>
  

如果需要把动态逻辑写到独立的CSS文件中，需要额外配置服务端框架，将CSS文件纳入模板引擎的解析范围，同时要做好缓存策略配置，避免不同用户的主题样式互相冲突。

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