kendo 在构建不同主题时抛出错误答案

【问题标题】：kendo throws errors when building different themeskendo 在构建不同主题时抛出错误
【发布时间】：2021-05-12 12:29:38
【问题描述】：

我在剑道和创建主题方面遇到问题。

我有一个带有 scss 的 Angular 应用程序，如果我告诉剑道改变这样的颜色

    ...other stuff
    $accent: purple;
    @import "node_modules/@progress/kendo-theme-default/all.scss";
    ...other stuff

完美运行！一切顺利！

但现在我想构建两个主题，以便可以在它们之间进行交换，就像这样

    ...other stuff
   :root {
       $accent: purple;
       @import "node_modules/@progress/kendo-theme-default/all.scss";
    }

   .other-theme{
       $accent: yellow;
       @import "node_modules/@progress/kendo-theme-default/all.scss";
    }
    ...other stuff

但它不起作用。编译时抛出的错误是

   CssSyntaxError [path of the scss] can't resolve ') format("truetype")' in [other path]


       font-style: normal;
       font-weight: normal;
       src: url(#{$icon-font-url} format("truetype"));

为什么改变颜色会影响字体？我不会以任何方式触摸它，我正在疯狂地尝试构建这样的主题。

感谢所有愿意提供帮助的人：D

【问题讨论】：

标签： angular sass kendo-ui kendo-ui-angular2

【解决方案1】：

我碰巧从事剑道主题的工作，一位客户向我指出了这个帖子，因为他遇到了同样的问题。

为了解决最简单的问题 - 导致问题的不是颜色变化。这是嵌套在类中时变量的处理方式。

更详细地说，我们将非文本文件（图像、字体）转换为 base64 编码的字符串，并将它们附加到一个名为 $data-uris 的变量中。稍后，我们通过key检索内容。

当您按原样使用主题时，一切都很好，并且找到了变量。

但是，当您嵌套导入时，事情会变得有点奇怪，因为缺少更好的词。我不确定“为什么”的确切原因，但在这个嵌套导入场景中，当我们尝试附加所述编码内容时，它没有附加到我们尝试从中检索它的同一位置。

好消息是，这一切都可以相对容易地解决：我们只需要在每次这样的导入之前重置一个变量。重置变量将使其全局可用。

另外，因为在 sass 中没有真正的“导入一次”或类似的东西，并且因为我们已经针对每个文件一个主题进行了优化，所以我们做了一些技巧来确保内容只加载一次且仅加载一次。这是一个非常基本的缓存，我们通过键缓存模块。所以你需要修改另一个变量。

两者结合：

$imported-modules: (); // reset the list of loaded modules for good measure
$data-uris: (); // reset the data-uris thus making them globally availble

.dark-theme {
    @import "all.scss";
}


$imported-modules: ();
$data-uris: ();

.light-theme {
    @import "all.scss";
}

更新：可能还有一个关于嵌套的问题。您可以关注：https://github.com/telerik/kendo-themes/issues/2286。我会尽量在合理的时间内解决这个问题。

【讨论】：