从MVC5或Web API 2控制器操作返回生成的CSS

在我们的多租户应用程序中，我们需要自定义每个租户使用的样式

我们目前计划在客户机上以以下方式使用较少的和变量：

从服务器下载依赖较少的文件

调用web服务以获取配置对象

定义了变量的有效LESS的表单字符串

使用

less.js

编译器根据这些变量和步骤1中固定的less文件编译less

这种方法有许多缺点：

• 客户可能表现不好
• 一些浏览器在

  less.js上有问题

• 编译需要时间

相反，我们希望在服务器上完成这项工作，因此粗略地说，这是在服务器上进行的：

客户端请求下载一个大的编译样式表-

GET content/styles/{tenantName}.css

使用

tenantName

服务器获取配置

使用模板和适当的变量（可能是

string.Format

或更复杂的东西）

服务器编译更少的CSS字符串

服务器返回带有适当内容类型的CSS字符串

以下是我的问题：

这是实现上述结果的不寻常或不可取的方式吗

除了为服务器端JavaScript设置架构之外，如何将LESS编译成CSS

在控制器操作或路由配置中，我必须做什么才能使客户端认为服务器返回的是一个常规的旧CSS文件，带有缓存控制，而不是修改的

您可以使用编译较少的服务器端

这取决于您希望如何提供文件。如果您知道所有租户，那么只需将每个租户应用程序的捆绑包url添加到捆绑包配置中

 var themeStyles = new CustomStyleBundle("~bundles/theme/tenant").Include("~/Content/theme.less");
 themeStyles.Builder = new ThemeBuilder();
 BundleTable.Bundles.Add(themeStyles);

如果您不这样做，并且租户像我们的情况一样灵活，那么为您的主题添加以下控制器操作

    [Route("bundles/theme/{id}")]
    public ContentResult Theme(string id)
    {
        var tenantThemePath = string.Format("~/bundles/theme/{0}", id);

        // Check that bundle has not already been added.
        if (BundleTable.Bundles.All(x => x.Path != tenantThemePath))
        {
            var themeStyles = new CustomStyleBundle(tenantThemePath ).Include("~/Content/theme.less");

            themeStyles.Builder = new ThemeBuilder();

            BundleTable.Bundles.Add(themeStyles);
        }

        var context = new BundleContext(HttpContext, BundleTable.Bundles, institutionPath);

        var response = BundleTable.Bundles.GetBundleFor(tenantThemePath).GenerateBundleResponse(context);

        Response.Cache.SetCacheability(response.Cacheability);

        return Content(response.Content, response.ContentType);
    }

BundleTransformer的ThemeBuilder实现

public class ThemeBuilder : IBundleBuilder
{
    public string BuildBundleContent(Bundle bundle, BundleContext context, IEnumerable<BundleFile> files)
    {
        var lessTranslator = bundle.Transforms.OfType<StyleTransformer>()
            .Where(x => x != null)
            .Select(x => x.Translators.OfType<LessTranslator>().FirstOrDefault())
            .FirstOrDefault();

        if (lessTranslator == null)
        {
            return string.Empty;
        }

        lessTranslator.GlobalVariables = GetThemeVariables();

        return string.Empty;
    }

    private string GetThemeVariables()
    {
        // Simplified for brevity
        // This will be translated to less variables by the BundleTransformer
        // themeColour should correspond to a variable name in your less file.  
        return string.Format("themeColour={0}", themeColour);
    }

}

public类ThemeBuilder:IBundleBuilder
{
公共字符串BuildBundleContent（捆绑包、BundleContext上下文、IEnumerable文件）
{
var lestranslator=bundle.Transforms.OfType（）
.其中（x=>x！=null）
.Select（x=>x.Translators.OfType（）.FirstOrDefault（））
.FirstOrDefault（）；
if（lessTranslator==null）
{
返回字符串。空；
}
lessTranslator.GlobalVariables=GetThemeVariables（）；
返回字符串。空；
}
私有字符串GetThemeVariables（）
{
//为简洁起见简化
//BundleTransformer会将其转换为更少的变量
//颜色应与less文件中的变量名相对应。
返回string.Format（“themeColour={0}”，themeColour）；
}
}

我们将这些变量隐藏在HttpContext存储中，这样我们就可以使用GetThemeVariables方法中的扩展方法将它们提取出来

我希望这有帮助

更新 我扩展了我的原始答案，并创建了一种更可重用的包含主题的方式

演示站点：

---

GitHub repo here:

您是否已经将所有less文件预先编译为css，那么这只是提供正确的css文件的一种情况。不，因为在编译时不知道租户。