Sencha Architect 3 does not use app.css

Question

I am trying to add custom font icons to my sencha architect project, and remove unnecessary theme classes but it seems that Sencha Architect does not use the app.scss at all (located in the resources/sass folder of my project). The changes that I made are neither applied in architect nor when I start the app.

app.scss

$include-pictos-font: 
false; $include-default-icons: false;

@import 'sencha-touch/default';   
@import'sencha-touch/default/src/Class';

@include icon-font('CustomFont', inline-font-files(  
'customFont/customFont.woff', woff,   'customFont/customFont.ttf',
truetype,   'customFont/customFont.svg', svg ));

@include icon("map"  , "e600", "CustomFont"); @include
icon("check_filled", "e602", "CustomFont");

Just to mention, I did compile the scss file to css and it compiles just fine.

Could someone elaborate, please?

I am using:

• Sencha Architect 3.0.2.1375
• Cmd: 4.0.2.67
• Framework: Sencha Touch 2.3.x

UPDATE:

It turns out that Architect does not use the app.scss file for theming reasons (see Phill's post). When I tried to insert the icon-font another problem did arise. The font-files could not be found. The reason is mentioned in the following post: http://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3

The following code resolved the issue and I can happily use my new icon-font now:

$font-files:
         url('../resources/sass/stylesheets/fonts/bla/bla.woff') format("woff"), 
         url('../resources/sass/stylesheets/fonts/bla/bla.ttf') format("truetype"), 
         url('../resources/sass/stylesheets/fonts/bla/bla.svg') format("svg");

@include icon-font('IcoMoon', $font-files); 

@include icon("map"  , "\e600", "IcoMoon"); 
@include icon("check_filled", "\e602", "IcoMoon");

To be explicit. I added a file to the theme in Architect (a scss resource) and added the aforementioned code.

Thong

Answer 1

Architect ignores this file as we give you full theme support. If you want to add custom scss click on the theme under resources. In the config panel you'll see a scss config; click the (+) icon to add a scss resource.

Now select it by either clicking the (->) button next to it or selecting it in the inspector under your theme. Switch to code view and paste in your scss.

Firooc

Thank you for sharing this with me. It helped me to resolve my issue. – Thong

Is it also possible to remove the 'automatic' sencha/default/all import and instead use the technique, described here: sencha.com/blog/4-tricks-for-smaller-css-in-touch-22 – Thong

Seems this would be possible by editing the scss file(s). We don't do this an an automated way though perhaps we should. – Firooc

It would be very helpful to implement this behaviour. The way I achieved it is to copy all the adjustments from the (scss view of the) theme. Also copy all the (optional) extra scss files within the theme. Then paste the copied code into an app.scss file and generate the app.css file. Please note that architect also includes a reference to the theme in the app.json file. I also had to manually change that line to the generated app.css. – Thong