如何根据子域设置可自定义的 CSS？答案

【问题标题】：How can I setup up customizable CSS based on the subdomain?如何根据子域设置可自定义的 CSS？
【发布时间】：2017-01-17 04:30:32
【问题描述】：

我正在设置单实例单数据库多租户应用程序。后端是用 Ruby on Rails 编写的，而前端是带有 Rails 框架的 AngularJS 中的单独应用程序。

我在抽象父状态上使用解析来确定子域，然后是租户。一旦确定了租户，我希望能够从前端的配置文件中读取 CSS 变量值，然后可用于生成包含项目其余部分引用的类的主 styles.css 文件。

我听说可以使用像 Sass 和 Less 之类的 CSS 预处理器来完成此任务，但我对这两者都没有经验，我一直在试图弄清楚如何设置它。

一些帮助/代码示例将不胜感激 - 谢谢！

【问题讨论】：

您能简化一下您要查找的内容吗？
嗨 Milind - 简而言之，我希望能够根据子域自定义 CSS。因此，如果用户访问tenant1.company.com，他们将看到一组颜色/字体，如果他们访问tenant2.company.com，他们将看到另一组颜色/字体。 tenant1.company.com 和tenant2.company.com 都托管在同一个实例上，css 颜色和字体在页面加载时动态确定。

标签： css angularjs sass less

【解决方案1】：

Sass 或 Less 不会真正满足您的需求，因为它们是在浏览器加载它们之前编译的。也就是说，浏览器只加载编译好的css文件。

不过，有几种方法可以实现您的目标。我不熟悉 Ruby，所以我会尽量保持我的服务器语言建议通用。这些显然不是完整的解决方案，因为我不知道您的全部情况。相反，这些只是为您提供一些线索的一些想法。

可能最好的方法是使用服务器逻辑将不同的类应用于正文标记，然后使用该类来确定将哪些样式应用于页面。比如：

/* probably a good idea to have fallback styles */
body {
  color: black;
  background: white;
  }

body.style-one p {
  color: red;
  background: blue;
  }

body.style-two p {
  color: blue;
  background: red;
  }

<body class="style-one">
  <p>This text will be red.</p>

当然，您也可以使用 javascript 更改 body 标签的类，因此用户可以更改页面的主题。

或者，您可以使用类似的服务器逻辑来写出第二个<link rel="stylesheet"...> 标记来拉入一个或另一个样式表。这里真正的优势是，如果您为各种主题设置了大量规则，您可以将它们很好地分开保存在自己的文件中。

我使用的最后一种方法（使用 php）是基于 GET 变量动态创建样式表，但将样式表打印为 css 文件。这种方法的缺点是我认为你失去了一些浏览器缓存优势。无论如何，这可能看起来像这样：

<?php
header("Content-Type: text/css");

if( $_GET['theme'] == 'one' ) {

  echo 'p { color: red; }';

} else {
  
  echo 'p { color: blue; }';
  
}
?>

a {
  color: green;
}

&lt;link rel="stylesheet" href="style.css.php?theme=one"&gt;

【讨论】：

谢谢你——这真的有助于澄清我的想法！
大侠，省得我头疼！