css - 如何根据 request.domain 包含文件

Question

我需要包含文件

"#{request.domain.split(".").first}.css.scss"

进入我的 custom.css.scss 文件。

我不知道怎么办。目标是声明特定的变量，并在每个文件中赋予它们不同的值，为每个不同的请求动态加载不同的文件

文件一个.css.scss

  $button_primary_color: #xxx;
  $header_background_color: blue;

文件二.css.scss

  $button_primary_color: #zzz;
  $header_background_color: red;

我也试过使用 CSS3 变量，但没有成功:

home[sn="one"] {
  --button_primary_color: #xxx;
}
home[sn="two"] {
  --button_primary_color: #yyy;
}

(它在不同的浏览器中表现不标准)，也不会替代以下语句。

div {
    color: var(--button_primary_color);
}

我想要更多的 bootstrap/sass 解决方案。我怎样才能做到这一点？

Answer 1

我仍在尝试找出最佳方法，但我过去做过的一件事是设置 config.assets.precompile 以有效地拥有特定于域的 css 文件，然后让您的布局生成适当的代码拉入特定的 css 文件。

config.assets.precompile += %w(application.js application.css domain1.css domain2.css)

您在 Assets 管道中的位置domain1.css 引入您需要的任何域特定代码。

比尝试在 css 代码中包含逻辑开关要干净得多(顺便说一句，afaik 你不能这样做)。