0

我正在开发一个多租户应用程序，该应用程序具有基于其定义的设置（如主题颜色等）的主题构建器。

我将这种方法http://bundletransformer-theme-builder.azurewebsites.net/用于 bootstrap 3。但是，由于我们已升级到 Bootstrap 4，它现在位于.scss.

所以我对项目实施 Bootstrap 4 的方法是添加以下内容：

主题/主题变量.scss

/*
 * Application global variables.
 */


$orcid-color : #96D72F;
$primary-color: #1c223d;

@import "../bootstrap/_functions.scss";
@import "../bootstrap/_variables.scss";

主题/主题.scss

/*
 * Global application theme.
 */
@import "theme-variables";
html,
body {
    height: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
// ...

主文件

/*
 * Entry point of global application style.
 */

// Theme variables, must be included before the libraries to allow overriding defaults
@import "theme/theme-variables";

// 3rd party libraries
@import "bootstrap/bootstrap.scss";


// Theme customization
@import "theme/theme";

现在在BundleConfig中定义如下

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new CustomStyleBundle("~/bundles/styles")
            .Include("~/Contents/main.scss"));
    }
}

然后创建以下代码..

[Route("bundles/themes/{id}"), AllowAnonymous]
public ContentResult Themes(int id)
{
    var id = 1;
    var institutionPath = string.Format("~/bundles/themes/{0}", id);

    if (BundleTable.Bundles.All(x => x.Path != institutionPath))
    {
        var themeStyles = new CustomStyleBundle(institutionPath)
            .Include("~/Contents/main.scss", new InjectContentItemTransform($"$primary-color: red;"));

        BundleTable.Bundles.Add(themeStyles);
    }

    return null;
}


public sealed class InjectContentItemTransform : IItemTransform
{
    private readonly string _content;

    public InjectContentItemTransform(string content)
    {
        _content = content;
    }

    public string Process(string includedVirtualPath, string input)
    {
        if (!_content.HasValue())
        {
            return input;
        }

        var builder = new StringBuilder();

        builder.Append(_content);

        return builder.ToString();
    }
}

然后在主布局中...

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="~/favicon.ico">

    @Styles.Render(string.Format("~/bundles/themes/{0}", 1))

    @Styles.Render("~/bundles/styles")

    <title>@ViewBag.Title</title>
</head>
<body class="body">
    <!-- //.... -->
</body>
</html>

添加变量或覆盖变量以应用颜色等值的正确方法是什么？

4

1 回答 1

1

Sass不像LESS，不支持修改变量值，所以通过使用item转换我们只能定义变量。

首先，您应该从文件中删除变量定义theme/theme-variables.scss：

/*
 * Application global variables.
 */


$orcid-color : #96D72F;
//$primary-color: #1c223d;

@import "../bootstrap/_functions.scss";
@import "../bootstrap/_variables.scss";

您的InjectContentItemTransform类的实现包含一个错误：只有变量定义将始终包含在捆绑内容中。这是正确的实现：

public sealed class InjectContentItemTransform : IItemTransform
{
    private readonly string _content;

    public InjectContentItemTransform(string content)
    {
        _content = content;
    }

    public string Process(string includedVirtualPath, string input)
    {
        if (!_content.HasValue())
        {
            return input;
        }

        var builder = new StringBuilder();
        builder.AppendLine(_content);
        builder.Append(input);

        return builder.ToString();
    }
}

要在调试模式下应用项目转换，您必须注册自定义捆绑解析器：

…
using BundleTransformer.Core.Resolvers;
…

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        BundleResolver.Current = new CustomBundleResolver();
        …
    }
}

许多创建多租户 Web 应用程序的开发人员必须编写自己的System.Web.Optimization.IBundleCache接口实现、类和具有重写方法System.Web.Hosting.VirtualPathProvider的类的自己版本。我建议您熟悉SmartStore.NET项目的源代码。BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandlerGetCacheKey

于 2019-10-02T14:33:13.813 回答