构建不同主题时，kendo 会抛出错误

编程问答 2022-05-02

问题描述

我在使用剑道和创建主题时遇到问题。

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

    ...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

解决方法

我碰巧在研究剑道主题，一位客户向我指出了这个主题，因为他有同样的问题。

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

为了详细说明，我们将非文本文件（图像、字体）转换为 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。我会尽量在合理的时间内解决这个问题。

angularangularkendo-uikendo-ui-angular2sasssass