custom.less

custom.less 是 SuccApp 前端样式脚本的约定文件名。它运行在浏览器端，适合定制门户、仪表板、报表、SuperPage 页面和系统提示页面的视觉样式。

系统会把 Less 编译成浏览器可使用的 CSS。Less 兼容 CSS，也支持变量、嵌套等扩展语法；语法可参考 Less 官方文档。

写在哪里

按复用范围选择样式位置：只给一个页面用，写在页面同目录的同名 .less；应用或项目内多个页面都要用，写到对应层级的 custom.less；多个项目或系统功能页都要用，才写到系统级 custom.less。具体路径、加载范围和优先级见脚本文件组织。

编写示例

custom.less 可以直接写 CSS，也可以使用 Less 嵌套写法。建议先用页面、应用或组件的外层类名收敛选择器，避免样式影响到其他页面。

.sales-dashboard {
  .summary-card {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    .title {
      font-weight: 600;
    }
  }
}

如果只是调整当前页面，优先写在页面同名 .less 中。多个页面确实要复用时，再上移到应用级或项目级 custom.less。

在页面设计器中，可以通过 视图 > 底部面板 > 前端脚本｜样式脚本 编辑当前页面的样式脚本。页面级样式会自动保存为与页面同名的 .less 文件。

生效范围和优先级

页面运行时会加载当前页面可用的前端样式。页面级样式影响当前页面；应用级 custom.less 影响应用内页面；项目级 custom.less 影响当前项目；系统级 custom.less 可能影响多个项目和系统功能页。

同一个页面同时命中多个层级的样式时，越靠近当前页面的样式越适合写具体覆盖规则。不要为了临时覆盖把选择器写得过深或放到系统级样式中，否则后续维护和回退都会变困难。

注意事项

1. 优先维护 .less 源文件，不要手工修改同名 .css 编译产物。
2. 选择器尽量收敛到当前页面、应用或明确组件范围，避免污染全局样式。
3. public/custom.less 会被浏览器加载，不要在注释或代码中写入密钥、账号、内部地址等敏感信息。
4. 修改项目级或系统级样式后，需要检查典型页面、深浅主题和不同屏幕宽度下的显示效果。

相关参考

• .less 样式脚本文件
• .css 样式文件
• 脚本文件的组织