Как добавить пользовательский CSS для просмотра?

Question

Я строю приложение в ExtJS 5.1 с помощью Sencha Cmd.

У меня есть следующий вид, расположенный на /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 Developer Tools, я вижу, что у компонентов есть классы, но они не соответствуют правилам CSS, и я не могу найти squareImg а также launcher классы по сгенерированному CSS. Что случилось?

Answer 1

Sencha CMD объединяет отдельные файлы SASS в один большой файл SASS. Он определяет, какие файлы SASS следует включить, анализируя ваши файлы JavaScript, чтобы определить, какие файлы требуются - таким же образом он создает объединенный файл JS.

Если вы используете собственный класс ExtJS, но не "требует" его, Sencha CMD не обнаружит этого и, следовательно, не будет включать соответствующие файлы SASS при упаковке CSS.

(Один из способов определить, происходит ли это, - оповещать об ошибках в консоли о синхронной загрузке классов)