PDA

View Full Version : Add CSS/SASS in a Sencha CMD build



mrduck
21 May 2014, 11:37 PM
Good day,

I've got one simple question about ExtJS, using Sencha CMD. What is the correct method of adding custom CSS (or Sass) code to the project? I prefer not adding a complete new theme, since the CSS instructions won't be that much.

It's easy in Sencha Touch (using app.json), but that doesn't work in ExtJS. I've got the ExtJS in Action book and looked up the forums, I can't find an answer to this simple question.

Thanks in advance,

jsakalos
22 May 2014, 12:41 AM
If it is a third party css, you can include it in index.html outside of x-compile block. If it is a sass then you put it in sass/src sass/var directories with names exactly as your views. For example if you have view app/view/MyView.js then you add sass to sass/var/view/MyView.scss and sass/src/MyView.scss.

jgrocha
27 Sep 2014, 7:35 AM
Hi,

I can create new ui if the view class is right below the view folder.

For example, for a view Application/app/view/Welcome.js, I've created Application/sass/src/view/Welcome.scss and it works as expected. The same for other views defined below app/view/.

But for a view inside a folder, like Application/app/view/Participation/Discussion.js, the ui defined in Application/sass/src/view/Participation/Discussion.scss DO NOT work.

My Application/sass/src/view/Participation/Discussion.scss contains:


@include extjs-panel-ui(
$ui-label: 'discussion',
$ui-header-background-color: #2A3315,
$ui-body-background-color: #2A3315,
$ui-body-font-size: 12px
);


I also tried to define the ui in Application/sass/src/view/Viewport.scss but it doesn't work also.

What am I missing?

Thanks in advance.

jgrocha
27 Sep 2014, 7:43 AM
Hi,

Answering my question, the problem was the

extend : 'Ext.panel.Panel', alias : 'widget.discussion',
ui : 'discussion',
frame : true, property that was generating a
discussion-framed CSS class.

I changed my ui to:


@include extjs-panel-ui(
$ui-label: 'discussion-framed',
$ui-header-background-color: #2A3315,
$ui-body-background-color: #2A3315,
$ui-body-font-size: 12px
);

and now it works.

Sorry for the noise.