如何添加自定义CSS查看？

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
        });
    }
});

自定义 CSS 定义于 /Web/app/sass/src/view/guard/apps/Launcher.scss:

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

.launcher {
    padding: 12px;
}

并使用 Chrome 开发人员工具检查元素，我看到组件有类，但它们不匹配 CSS 规则，我找不到 squareImg 和 launcher 类在生成的 CSS 上。怎么了？

Answer 1

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

如果您使用自定义 ExtJS class，但不 "require" 它，Sencha CMD 将不会检测到它，因此不会包含相应的 SASS 文件打包 CSS.

时

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

如何添加自定义CSS查看？

How to add custom CSS to view?

extjs

extjs5