How to add custom CSS to view?

Question

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?

Can you check what all css files are generated after sencha build.. also check if you are refering the css generated by build — Yellen
– Yellen, Commented May 20, 2015 at 13:37
Part of the problem might be that the way Sencha Cmd combines the individual SASS files together works off the requires hierarchy. You need, somewhere, to specify that your Launcher class is required by something - probably the main App class. You should probably check that your Sass namespace is set to 'Web' - I think the default is 'Ext'. — Robert Watkins
– Robert Watkins, Commented May 20, 2015 at 23:37
@RobertWatkins That indeed worked! I added requires: ['Web.view.guard.apps.Launcher'], to my app/Application.js file and now the CSS rules are applied. Also, the default workspace is the same as the name of the app generated by Sencha Cmd, so no problem there. If you're willing to write an answer, I can mark it as accepted :) — Bruno Finger
– Bruno Finger, Commented May 21, 2015 at 9:26

Robert Watkins · Accepted Answer · 2015-05-22 01:06:26Z

1

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)

answered May 22, 2015 at 1:06

Robert Watkins

2,21616 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruno Finger Over a year ago

I must add that besides that, browser's cache may also make it hard to identify whether the CSS was generated or not. It is a good practice to disable it while developing. On Chrome, simply open the Developer Tools ( ctrl + shift + J), go to Network tab and check Disable cache. It will disable the cache for this address only.

Robert Watkins Over a year ago

Indeed. I'm somewhat surprised that disabling caches isn't the default with the developer tools...

Collectives™ on Stack Overflow

How to add custom CSS to view?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related