我正在构建一个 SaaS 产品，客户的首要要求之一是允许他们为其贴上白标。
- 客户域
- 在 UI 中包含客户 Logo
- 更改配色方案以匹配客户品牌
在所有需要完成的工作中，我认为最容易掌握的部分是设置自定义子域(我在 AppEngine 上运行，但在任何服务器设置上都非常简单)。
我的主要问题围绕着前端样式的最佳实践。我的设置要求我定义颜色以覆盖 CSS 规则和覆盖 Javascript 变量。我所做的假设是我将任何图像 Assets /路径和颜色信息存储在数据库中。这是我正在考虑的两条路径，但它们似乎都有相当严重的缺陷。
- 部署任务 - 在部署之前，运行一个 Grunt(或其他自动化)任务，从数据库中提取客户样式信息并创建自定义 CSS/JS 文件
- 运行时 - 在应用程序引导期间，从数据库中提取客户信息并动态覆盖样式(内联样式、JS 覆盖等)
我看了很多建议或其他经验，但都一无所获。白色标签的最佳实践是什么？我应该继续沿着这两条路之一走还是有更好的选择？我应该注意哪些陷阱？不同的选项对性能有影响吗？
这个问题故意与语言和框架无关，因为无论如何实现，基本原则应该是相同的。
最佳答案
我在使用 LESS 之前已经实现了这个:
我们首先更新了所有 CSS 文件以使用 LESS。所有将根据每个客户而变化的必要颜色都使用了 LESS 变量。我们将主要的 less 站点文件称为“main.less”。
当用户登录我们的系统时，它会从数据库中获取与客户主题相关的信息，并将其转换为 LESS 变量表示法。然后它会获取 main.less 内容的副本，并将客户端特定的 less 变量添加到它前面，然后将其写入客户端特定的 .less 文件(client-a.less)。然后我们的系统会将其编译成一个 css 文件 (client-a.css)，然后我们的系统将其包含在每个页面请求中(例如，我们的系统会根据客户端名称知道编译后的 css 文件将被命名为什么)。
此方法将为每个客户端创建一个唯一的 .less 和 .css 文件，并将减少每次请求页面时从数据库调用客户端特定主题详细信息的任何需要，因为此编译过程仅在每次登录。
您可以通过序列化编译后的 less 文件 (client-a.less) 并将其存储为 .cache 文件来进一步节省服务器资源。现在，当每个用户登录到您的系统时，您可以将要编译到 client-a.less 的内容序列化，将其与 .cache 文件进行比较，如果不同，则继续编译 client-a.css 文件.如果没有区别，则无需编译 css 文件。
关于javascript - 如何为 SaaS 解决方案贴上白标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23457254/