Question

我正在使用Sencha Cmd在ExtJS 5.1中构建应用程序。

我有以下视图，位于/Web/app/app/view/guard/apps/Launcher.js：

Ext.define('Web.view.guard.apps.Launcher', {
    extend: 'Ext.button.Button',
    xtype: 'widget.applauncher', 

    scale: 'large',
    border: false,
    icon: 'http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg',

    iconAlign: 'top',
    iconCls: 'squareImg',
    bodyCls: 'launcher',

    handler : function() {
        var app = Ext.create('Web.view.desktop.window.Window', {
            title : this.text
        });
    }
});

在/Web/app/sass/src/view/guard/apps/Launcher.scss上定义的自定义CSS：

.squareImg {
    width: 64px;
    height: 64px;
}

.launcher {
    padding: 12px;
}

使用Chrome开发者工具检查元素，我看到组件包含类，但它们与没有CSS规则相匹配，我无法找到squareImg和launcher类生成CSS。有什么问题？

Answer 1

Sencha CMD将单个SASS文件合并为一个大型SASS文件。它通过解析JavaScript文件来确定要包含哪些SASS文件，以确定需要哪些文件 - 与构建组合JS文件的方式相同。

如果您使用自定义ExtJS类，但不“需要”它，Sencha CMD将不会检测到它，因此在打包CSS时不会包含相应的SASS文件。

（检测是否发生这种情况的一种方法是警告控制台中有关同步下载类的错误）

如何添加自定义CSS进行查看？

1 个答案: