我正在遵循 ExtJS6 主题指南并在面板上创建我的第一个 mixin。 我在 packages/local/my-classic-theme2/sass/var/panel/Panel.scss 中创建了一个主题 当我运行时面板没有改变,我收到以下错误。在 panel.scss 中它说未声明的混合。
我错过了一步吗?
@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
);
我把它放在实际的面板上
ui: 'highlight',
frame: true,
最佳答案
这是我做的:
使用以下命令创建了一个新应用
sencha -sdk <path to ext 6.0.2> generate app -ext MyApp MyTestApp
cd MyTestApp
sencha generate theme --extend theme-classic my-classic-theme2
创建文件夹 panel
里面packages/local/my-classic-theme2/sass/src
并创建了一个文件 Panel.scss
在该文件夹内。
编辑该文件并按原样粘贴您的代码:
@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
);
编辑了 classic/src/view/main/Main.js
文件并将元素 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'
}]
}]
}]
最后编辑了app.json
并确保我的 "theme"
指向 my-classic-theme2
冉 sencha app watch
然后去了http://localhost:1841
我的用户选项卡显示了带有红色标题的面板。
关于css - extjs6 主题指南 - 混合不被识别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37684499/