Extjs 6 - 现代工具包 ui-mixins 构建错误

Posted 2023-02-25

【中文标题】Extjs 6 - 现代工具包 ui-mixins 构建错误

【英文标题】：Extjs 6 - modern toolkit ui-mixins build error

【发布时间】：2016-01-22 17:26:19

【问题描述】：

我有一个 Extjs 6 工作区，其中包含两个包（一个用于经典包，一个用于现代包）和一个示例应用程序。使用相应的 ui-mixins 对经典包组件进行样式设置没有问题，例如：@include extjs-panel-ui();。但是，当我尝试使用相应的 ui-mixins 为现代组件设置样式时，出现错误：

[ERR] unknown definition for mixin named panel-ui : 

[INF] Build error for ../../../build/temp/production/pra_kitchensink/slicer-temp/pra_kitchensink-example.scss
[ERR] Error: Sass compilation encountered 1 error(s)
[ERR] 
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Sass compilation encountered 1 error(s)
[ERR]   at sun.reflect.DelegatingMe
[ERR] thodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
[ERR] 
[ERR] Total time: 21 seconds

我正在尝试在现代工具包中设置面板样式，因此我使用@include panel-ui();

有谁知道为什么我可以将 ui-mixins 用于经典组件，但是当我尝试将 ui-mixins 用于现代组件时却出现构建错误？令人困惑的是，如果我运行 sencha app watch modern，它会按预期工作和运行，但是当我运行 sencha app watch 或 sencha app build 时，我会收到上面的构建错误。

【问题讨论】：

您的 app.json 的“构建”部分有什么？

【参考方案1】：

在花了几个小时寻找拼写错误、代码示例或其他报告后，我发现您的问题是我在网上找到的唯一内容，然后在给予赏金之后，我似乎找到了解决方案。

我在我的 projectname/sass/var/all.scss 中使用了此代码，它给出的错误与您报告的完全相同。

@include panel-ui (
  $ui: 'mainmenu',
  $body-background-color: red
);

然后查找示例（例如 ext-6.0.1/examples/modern/addressbook/sass/src/view/Main.scss），我发现我将其包含在错误的文件中。

因为我想设置 Ext.Panel 的样式，所以我认为它应该包含在 /sass/src/Panel.scss 中，但文件名应该映射到我自己的源文件。就我而言：sass/src/view/main/Menu.scss

现在它可以编译，并且工作正常。

我想问题在于，当使用 srs/Panel.scss 时，代码根本没有包含在内，而在 var/all.scss 中执行此操作时，它被评估到很早，在 Fashion/Cmd 找到 panel-ui 之前定义。