View Full Version : Difficulty getting application specific SCSS to work

1 Aug 2013, 8:28 AM
I've been following the theming guide while building my first theme and everything was fine until I got to the part where I needed to add application specific scss for my application.

Quick context: App was initially built in Architect, then I created the workspace according to the guide. I then brought the application into the workspace and used Sencha CMD to set up its configuration based on the existing project. I then created the new theme and applied it to the application via the config options for cmd.

The following theme variables apply correctly to my application:

$base-color: #eee !default;

$toolbar-background-gradient: null !default;
$toolbar-border-width: 0px !default;

I then wanted to give a specific toolbar a bottom border and so in my application folder I put the following file:

.navigation_toolbar {
border-width: 0 0 1px 0;
border-color: red;

The Main view in my application is, minus unneeded values for this post, defined like this:

Ext.define('QSB.view.Main', {
extend: 'Ext.container.Viewport',


initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
items: [
xtype: 'toolbar',
cls: 'navigation_toolbar',

I've tried cls and componentCls to no avail. I can build/refresh the app with sencha cmd but I don't notice the application specific changes. I'm currently looking at the workspace/application/index.html file as the theming guide says to just use development mode (not to mention trying the production index.html file causes the application to freak out due to looking for files that don't exist right now).

What is it that I am doing wrong here?

1 Aug 2013, 8:53 AM
right click on the toolbar, check if your custom CSS rules are there.

-> did you include (import) your custom scss file so that it is there?

in general i would go for a toolbar ui instead.

best regards

1 Aug 2013, 9:02 AM
The rules aren't there at all.

I don't have an include anywhere, and I just went back over the theming guide twice and don't see anything in there about having to include anything. The way it reads, just putting the scss file in the proper directory (application\sass\src\view\) and naming it the same name as the class where the component is defined (Main.scss) and then doing a "sencha app build" should be enough to compile/build the css so that everything appears correctly.

Will application specific scss code only appear in the production/built version of the application, or should I see it in the development version as well?

Also, what advantages does a ui have for changing one or two minor aspects of a single component vs just making the css as I've done?

1 Aug 2013, 10:00 AM
Will application specific scss code only appear in the production/built version of the application, or should I see it in the development version as well?

Both, dev and production. It gets compiled into the same CSS file.

Also, what advantages does a ui have for changing one or two minor aspects of a single component vs just making the css as I've done?

Reusability. It is described here:
-> Creating Custom Component UIs

Each UI will create a CSS rule which you can manually modify.

1 Aug 2013, 10:14 AM
Using UI does seem to make sense in a lot of use cases, and that is something that I probably will start using as I move forward. However, let's put that aside for now as it still doesn't solve the problem I'm having which is "why isn't my scss file in my applications sass/src/view/Main.scss file not being included?" Even if I don't use it often I really want to understand WHY it's not working correctly now.

You asked me earlier if I had included the file somewhere so that it could be included. Is this something I need to do or is my understanding that Sencha CMD should figure out that having a app/view/Main.js file means it should look for sass/src/view/Main.scss and automatically include it correct?

1 Aug 2013, 10:37 AM
go to app / resources / sass / app.scss

and use

@import 'pathToMain/Main';

As far as I know the inclusion only works for framework classes out of the box.

best regards

1 Aug 2013, 11:06 AM
I've tried several different paths to get it to work with no luck, get build errors. So let me lay out my folder structure:

workspace/ <== Name of the workspace

desktop/ <== Name of the folder the application is in



Main.js <== Class which holds the toolbar I want to individually style







Main.scss <== File holding the css properties





Should I be putting the app.scss file into workspace/desktop/app/resources?

What is the path relative to? I would assume the file itself.

Am I trying to point to the Main.js file or the Main.scss file?

1 Aug 2013, 12:05 PM
sorry, i was jumping between touch and ext, which is a bit different.

in ext you have the file here:
sass / etc / all.scss

try the following there:

@import '../src/view/Main';

this is of course related to the scss file, but you do not need to write .scss.

best regards

1 Aug 2013, 12:43 PM
While that doesn't throw any errors, it actually doesn't accomplish anything. However, I've tracked the problem to being due to HOW the project was created. It was originally, and still continues to be, developed with Architect. It was inserted into the workspace and then configured to work with Sencha CMD according to the first several steps of this post (http://www.sencha.com/forum/showthread.php?246508-Architect-Sencha-Cmd).

If I follow the theming guide and create a workspace/application from scratch, however, adding in custom scss files works like a charm. I don't have to do any manual @include or anything.

.x-panel_header {
font-size: 100px;

.x-tab {
height: 50px;

Those get applied after a build/refresh, which fits in with the theming guide which says it should happen automatically. So there is clearly some configuration value, somewhere, that is getting properly set when an application is created by Sencha Cmd that for some reason simply isn't being set when taking an Architect project and configuring it to work with Sencha Cmd.

The real question is, what the heck is that value and where is it? I've been comparing files but haven't found what it is I'm missing as of yet. I'm all ears for any ideas and will post here if I figure it out, but at the moment I'm still at a loss.

2 Aug 2013, 10:41 AM
Well, I got around the problem though I still have no clue as to where the actual problem was. What I ended up doing was deleting the Architect app from the workspace (it was in git so I had another copy for use a little later) and recreating it via Sencha Cmd. Once I did that I manually moved the files from the Architect app into the Sencha Cmd created app. Once I moved all the necessary files over I could get the application specific theming to work like a charm as well as allowing me to continue to develop the app in Architect.