APEX 21.2如何在静态文件中使用嵌套的#WORKSPACE_FILES#引用

你对问题的推测是正确的，Oracle APEX的替换字符串（如#WORKSPACE_FILES#）仅会在页面渲染过程中，对页面内嵌代码、模板、组件属性等APEX引擎直接处理的内容进行解析替换，不会对单独上传的静态CSS、JS等资源文件的内部内容做扫描替换，因此直接在静态CSS文件里写替换字符串不会生效。

可行的解决方案 #

• 方案1：使用相对路径引用资源（最简便）

  静态CSS文件引用外部资源时，相对路径是相对于CSS文件本身的存储位置，不需要依赖APEX替换变量。
  如果你上传的CSS文件存储在Workspace Files的根目录，且imgs文件夹是同层级的子目录，直接把CSS中的路径改为相对路径即可：

  /* Customize Login Logo */
  span.t-Login-logo {
      background-image: url(imgs/login-logo.png);
      background-size: cover;
      background-color: transparent;
  }
  
  /* Customize Login Background */
  body.t-PageBody--login {
    background-image: url(imgs/login-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  

  修改后重新上传CSS文件即可正常生效，且静态文件自带缓存优势，性能最优。

• 方案2：拆分代码，替换变量部分保留在内联CSS中

  如果你需要保留替换变量的使用（比如资源路径可能动态调整），可以把不涉及替换变量的通用样式（比如主题变量覆盖、其他不涉及路径的样式）放在静态CSS文件中引用，仅把涉及替换变量的样式代码放在Login Page的CSS Inline区域，兼顾静态文件缓存能力和变量解析需求。

• 方案3：通过内联CSS定义全局路径变量

  也可以在页面的CSS Inline区域先定义全局CSS变量存储解析后的资源根路径，静态CSS文件直接调用该变量即可：
  页面内联CSS部分：

  :root {
    --workspace-file-root: #WORKSPACE_FILES#;
  }
  

  静态CSS文件中引用：

  span.t-Login-logo {
      background-image: url(var(--workspace-file-root)imgs/login-logo.png);
  }
  

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