【发布时间】：2018-10-18 16:29:42
【问题描述】：
我有一个 ASP.NET MVC Web 应用程序，我计划为其使用 Bootstrap（因为它是默认 MVC 模板的一部分）。我知道自定义引导程序以使其看起来像我想要的那样非常简单，以及如何通过创建我自己的 site.scss 文件来覆盖主题颜色，该文件在定义主题颜色的覆盖后导入 bootstrap.scss：
$theme-colors: (
primary: #123456; // whatever colour I want here
);
@import "bootstrap.scss";
然后将其编译为 site.css 并提供给我们的客户。
但是，我们的客户需要能够定义自己的主题。所以如果他们想要蓝色按钮，他们就会得到蓝色按钮，如果他们想要红色，他们就会得到红色。 Bootstrap 有什么支持的方法吗？
我考虑过创建一组有限的彩色主题供他们选择，并为每个主题创建一个单独的.scss 文件，然后提供适当的.css，但我想使用 ASP.NET捆绑功能，这是在应用程序启动时完成的，因此我还必须为每个主题选项提供一个单独的捆绑包。
另外，我注意到当你编译 boostrap.scss 时，你会得到一个 css 变量列表：
:root {
--blue: #007bff;
--indigo: #6610f2;
...
--primary: #123456;
}
并简要地认为它会在整个应用样式时使用这些，因此我可以从单独的样式表中覆盖以设置我的自定义颜色。遗憾的是，.css 文件的其余部分都使用了十六进制代码，而不是相应的 css 变量。为了证明这一点，我对列为 css vars 的所有颜色进行了查找和替换，并且我能够从后续样式表中覆盖它们，本质上是在运行时提供主题。但这不是一个很好的解决方案，因为它需要编辑已编译的 css 文件（在开发过程中会经常被覆盖）。
有没有人有更好的想法？
【问题讨论】：
-
SASS 已预编译为 CSS，因此实际上无法在浏览器中重新编译 SASS。您可以通过 API 在服务器上公开 SASS，然后在浏览器中从 JS 调用该 API。
-
您可以拥有一个包含主要样式（布局、字体定义）的样式表和许多仅包含颜色定义的样式表。然后，更改一个类甚至更改活动样式表以更改界面颜色。或者也许让客户端选择主题，并在服务器中编译 css 并将结果存储在客户端的特定 css 中。
标签： twitter-bootstrap sass bootstrap-4 asp.net-bundling