extjs6 theming guide - Mischen wird nicht erkannt

Question

Ich befolge die ExtJS6 Themenführung und erstelle meine erste Mischung auf einem Panel. Ich habe ein Thema in Pakete erstellt/local/my-classic-theme2/sass/var/Panel/Panel.scss Das Panel wird nicht geändert, wenn ich laufe und ich bekomme die folgenden Fehler. In der panel.scss steht nicht deklariertes Mixin.

sencha app Uhr Fehler in Bild

bin ich dabei einen Schritt?

@include extjs-panel-ui(
$ui: 'highlight-framed', 
$ui-header-background-color: red, 
$ui-border-color: red, 
$ui-header-border-color: red, 
$ui-body-border-color: red, 
$ui-border-width: 5px, 
$ui-border-radius: 5px, 
$ui-header-color: white 

);

und ich habe dies auf dem tatsächlichen Panel

ui: 'highlight', 
frame: true, 

Answer 1

Hier ist, was ich getan habe:

Erstellt eine neue App mit dem folgenden Befehl

sencha -sdk <path to ext 6.0.2> generate app -ext MyApp MyTestApp

cd MyTestApp

sencha generate theme --extend theme-classic my-classic-theme2

Der Ordner panel innerhalb packages/local/my-classic-theme2/sass/src erstellt und eine Datei Panel.scss in diesem Ordner erstellt.

dass Datei bearbeitet und Ihren Code eingefügt wie:

@include extjs-panel-ui(
    $ui: 'highlight-framed', 
    $ui-header-background-color: red, 
    $ui-border-color: red, 
    $ui-header-border-color: red, 
    $ui-body-border-color: red, 
    $ui-border-width: 5px, 
    $ui-border-radius: 5px, 
    $ui-header-color: white 
); 

Herausgegeben die classic/src/view/main/Main.js Datei und ersetzt die Einzelteile mit diesem Block:

items: [{ 
    title: 'Home', 
    iconCls: 'fa-home', 
    // The following grid shares a store with the classic version's grid as well! 
    items: [{ 
     xtype: 'mainlist' 
    }] 
}, { 
    title: 'Users', 
    iconCls: 'fa-user', 
    items : [{ 
     xtype: 'panel', 
     frame: true, 
     ui: 'highlight', 
     title: 'Testing my highlight panel', 
     items: [{ 
      xtype: 'textfield', 
      fieldLabel: 'Foo', 
      value: 'Bar' 
     }] 
    }] 
}] 

Und schließlich app.json bearbeitet und sorgte dafür, dass mein "theme" ist zeigt auf my-classic-theme2

lief sencha app watch und ging zu http://localhost:1841

Meine Benutzer Registerkarte zeigte das Panel mit rotem Titel wie es sollte.