Results 1 to 2 of 2

Thread: Can I import existing SCSS in Sencha Themer

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2016
    Posts
    12

    Default Answered: Can I import existing SCSS in Sencha Themer

    Hello,
    Is it possible to import/reuse scss classes in Sencha Themer when creating a custom theme? I am trying to convert some existing stylesheets to a ExtJS compatible theme using Sencha Themer and wondering if the old files could be of any help.

    Thanks.

  2. Hello, sorry for the delayed reply.

    Yes, you can absolutely do this, however, Themer itself provides no mechanism to easily 'import' SCSS/CSS.

    tl/dr; Themer simply generates a standard Sencha Package, so you can do normal package things manually, and Themer will continue to function

    You can read about theming here: https://docs.sencha.com/extjs/6.5.0/..._the_theme_api

    If you did not follow the best practices guide on structuring your SCSS files, that's OK too. You can put your SCSS/CSS files inside of the correct SASS folder (read guide to know differences between the three folders, but basically Cmd imports fils in this order: etc -> src -> var). Then, add an entry in package.json to reference your file.

    The is one gotcha if you have changed variables in your custom SCSS files: Themer will not know about them. This means those variables will not have the revert (x) button next to the variable to 'revert' it back to the base theme's default value. This hopefully isn't a huge deal, but if you do care, you can find and move all of your variable assignments into save.scss file, and Themer will pick them up and make them 'revertable'.

    Hope this helps and I'm not too late!

  3. #2
    Sencha - Ext JS Dev Team
    Join Date
    Mar 2016
    Posts
    64
    Answers
    20

    Default

    Hello, sorry for the delayed reply.

    Yes, you can absolutely do this, however, Themer itself provides no mechanism to easily 'import' SCSS/CSS.

    tl/dr; Themer simply generates a standard Sencha Package, so you can do normal package things manually, and Themer will continue to function

    You can read about theming here: https://docs.sencha.com/extjs/6.5.0/..._the_theme_api

    If you did not follow the best practices guide on structuring your SCSS files, that's OK too. You can put your SCSS/CSS files inside of the correct SASS folder (read guide to know differences between the three folders, but basically Cmd imports fils in this order: etc -> src -> var). Then, add an entry in package.json to reference your file.

    The is one gotcha if you have changed variables in your custom SCSS files: Themer will not know about them. This means those variables will not have the revert (x) button next to the variable to 'revert' it back to the base theme's default value. This hopefully isn't a huge deal, but if you do care, you can find and move all of your variable assignments into save.scss file, and Themer will pick them up and make them 'revertable'.

    Hope this helps and I'm not too late!

Similar Threads

  1. [FIXED] Themer can't open existing theme.
    By MikeRH in forum Sencha Themer
    Replies: 2
    Last Post: 22 Sep 2016, 9:32 AM
  2. Is it possible to import an SCSS file into a theme within Architect?
    By ryoustra in forum Sencha Architect 3.x: Q&A
    Replies: 3
    Last Post: 20 Feb 2015, 7:14 AM
  3. Using @import in Scss Resource for Sencha Architect 3
    By ken_yoshioka in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 20 Jun 2014, 10:01 AM
  4. Sencha Cmd 3.1 ignores @import in app.scss
    By bjudson in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 22 Apr 2013, 3:03 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •