如何为SaaS解决方案加白标签？

Question

我正在构建SaaS产品，客户的最高要求之一就是允许他们使用白色标签。

• 客户领域
• 在用户界面中包含客户徽标
• 更改配色方案以匹配客户品牌

在所有需要完成的工作中，我认为最容易理解的部分是设置自定义子域（我在AppEngine上运行，但是在任何服务器设置上都非常简单）。

我的主要问题围绕着前端样式的最佳实践。我的设置要求我定义颜色以覆盖CSS规则和Javascript变量。我所做的假设是，我将任何图像资产/路径和颜色信息存储在数据库中。这是我正在考虑的两条路径，但似乎都存在严重的缺陷。

1. 部署任务-部署前，运行Grunt（或其他自动化）任务，该任务从数据库中提取客户样式信息，并根据每个任务创建自定义CSS / JS文件
2. 运行时-在应用程序引导过程中，从数据库中获取客户信息并动态覆盖样式（内联样式，JS覆盖等）

我一直在寻找很多建议或其他经验，却空无一人。白色标签的最佳做法是什么？我应该继续沿着这两个路径之一走下去还是有更好的选择？我应该注意哪些陷阱？不同的选择对性能有影响吗？

这个问题是有目的的，与语言和框架无关，因为无论如何实现，其基本原理都应该相同。

Answer 1

在使用LESS之前，我已经实现了这一点：

我们首先更新了所有CSS文件以使用LESS。所有将根据每个客户更改的必要颜色都使用了LESS变量。我们将主站点文件称为“ main.less”。

当用户登录我们的系统时，它将从数据库中获取与客户主题有关的信息，并将其转换为LESS变量符号。然后，它将获取main.less内容的副本，并在其前面添加特定于客户端的较少变量，然后将其写入特定于客户端的.less文件（client-a.less）。然后，我们的系统将其编译成一个css文件（client-a.css），然后我们的系统将其包含在每个页面请求中（例如，我们的系统将知道将根据客户端名称来命名编译后的css文件）。

此方法将为每个客户端创建一个唯一的.less和.css文件，并且将减少每次请求页面时从数据库调用客户端特定主题详细信息的需求，因为此编译过程仅在每次登录时进行。

您可以通过序列化较少的编译文件（client-a.less）并将其存储为.cache文件来节省更多服务器资源。现在，当每个用户登录到系统时，您都可以将要编译的内容序列化为client-a.less，将其与.cache文件进行比较，如果不同，则继续编译client-a.css文件。如果没有差异，则无需编译css文件。