Add own scss files to the appName-all.scss

0
votes

In scss I would usually add other scss files using the @import command. With sencha cmd the SCSS file for my ExtJS app is generated.

Where and how do I add custom styles which then should be compiled into the app-all.css?

I don't want to create a custom theme (because I think that's an overkill) I am using the default Classic theme, ExtJS 4.2 with Sencha Cmd 3.1.2

I see $include variables in the generated app-all.scss but there are no @imports for my custom scss files

generated appName-all.scss

...
$include-ext-window-messagebox: true;
$include-ext-window-window: true;
$include-appname-app-application: true;
$include-appname-controller-customer: true;
$include-appname-view-listings-index: true;
...
@import '../../../packages/ext-theme-classic/sass/var/window/MessageBox';
@import '../../../packages/ext-theme-classic/sass/var/window/Window';
...
@import '../../../packages/ext-theme-classic/sass/src/window/MessageBox';
@import '../../../packages/ext-theme-classic/sass/src/window/Window';
...

I've put my custom scss files into the existing appName/sass/src folder like this:

appname/view/listings/Index.scss

Unfortunately this seems to be ignored, when executing sencha app build.. How do I configure Sencha Cmd to include my custom scss files when generating appname-all.scss?

1
extjssasssencha-cmd

1 Answers

0
votes

Oh wow.. just read my own question and had the idea that actually my folder structure is not really the same as extjs native structure (theme/sass/src vs sass/src/appName)

moving my Index.scss to appName/sass/src/view/listing/Index.scss solved the problem totally :)

new appName-all.scss after sencha app build

/* including package appName */
$branchenbuchAdmin-resource-path: 'images' !default;
$relative-image-path-for-uis: $appName-resource-path;
@import '../../../apps/appName/sass/src/view/listings/Index';

Loving it :)