Geek Answers Handbook

Sencha Architect 3 does not use app.css

I am trying to add custom font icons to the sencha architect project and remove unnecessary theme classes, but it seems that Sencha Architect does not use app.scss at all (located in the resources / sass folder of my project). The changes I made do not apply either to the architecture or when the application starts.

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 compiled the scss file in css and it compiles just fine.

Can someone clarify please?

I use:

  • Sencha Architect 3.0.2.1375
  • Cmd: 4.0.2.67
  • Frame: Sencha Sep 2.3.x

UPDATE:

It turns out that the Architect does not use the app.scss file to explain the reasons (see Phill post). When I tried to insert the font icon, another problem arose. Could not find font files. 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 font icon:

 $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 the file to the theme in Architect (scss resource) and added the above code.

+4
source share
1 answer

The architect ignores this file as we provide you with full theme support. If you want to add custom scss, click on the topic under resources. In the settings panel, you will see the scss configuration; click the plus sign (+) to add a scss resource.

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

+2
source

More articles:


All Articles