Extjs 6 - modern toolkit ui-mixins build error

Question

I have an Extjs 6 workspace with two packages (one for classic and one for modern) and a sample app in it. I have no problem styling the classic package components with the corresponding ui-mixins, ex: @include extjs-panel-ui();. However, when I attempt to style modern components with the corresponding ui-mixins I am getting an error:

[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

I am trying to style a panel in the modern toolkit so I am using @include panel-ui();

Does anyone know why I'm able to use the ui-mixins for classic components but I get a build error when I try and use the ui-mixins for modern components? Confusingly, if I run sencha app watch modern, it works and functions as expected, but when I run sencha app watch or a sencha app build I get the build error above.

Answer 1

After using hours on looking for spelling errors, code samples or other reports I figured your question was the only thing I found online, then after giving it the bounty it looks like I found a solution.

I was using this code in my projectname/sass/var/all.scss and it gave the exact same error as you report.

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

Then looking for samples (like ext-6.0.1/examples/modern/addressbook/sass/src/view/Main.scss) I figured that I was including it in the wrong file.

Since I wanted to style a Ext.Panel I figured it should be included in /sass/src/Panel.scss but the file name should be mapped to a file of my own source. In my case: sass/src/view/main/Menu.scss

Now it compiles, and works fine.

I guess the issue is that when using the srs/Panel.scss the code was simply not included, and when doing it in var/all.scss it was evaluated to early, before Fashion/Cmd have found the panel-ui definition.