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.

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.