Reputation: 2603
I am building an application in ExtJS 5.1 using Sencha Cmd.
I have the following view, located on /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
});
}
});
And custom CSS defined on /Web/app/sass/src/view/guard/apps/Launcher.scss
:
.squareImg {
width: 64px;
height: 64px;
}
.launcher {
padding: 12px;
}
And inspecting the elements using Chrome Developer Tools, I see the components have the classes, but they match with no CSS rules, and I can't find squareImg
and launcher
classes on the generated CSS. What is wrong?
Upvotes: 0
Views: 1019
Reputation: 2206
Sencha CMD combines individual SASS files into one large SASS file. It determines which SASS files to include by parsing your JavaScript files to determine which files are required - the same way it builds the combined JS file.
If you use a custom ExtJS class, but don't "require" it, Sencha CMD won't detect that, and therefore won't include the corresponding SASS files when packaging the CSS.
(One way to detect if that is happening is to be alert for errors in the console about downloading classes synchronously)
Upvotes: 1