Results 1 to 3 of 3

Thread: How to override SASS variables in the default theme without creating a custom theme?

  1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Answers
    4

    Default Answered: How to override SASS variables in the default theme without creating a custom theme?

    Hi. I am missing something obvious I think.

    I have read the themeing guide, can create a custom theme, set variables etc.

    However I would like to just use the ext-theme-gray and change a few variables without hacking the library theme files themselves. So, I set the theme via the sencha.cfg file and have the default gray theme. All good so far.

    Now, following the cited example of setting a base color I created a file myapp/sass/var/Component.scss and set $base-color: #00f !default; as a test. I then rebuilt a production build via sencha cmd but the base color remains #ccc.

    What am I missing please?

    Thanks,
    Murray

  2. Quote Originally Posted by lumberjack View Post
    For example, in the demo app generated by Sencha Cmd, the main view is app/view/Main.js, so you'd place the override in app/sass/var/view/Main.scss
    Thanks Brian. I was making a dumb mistake. My Main.js is defined as 'App.view.Main' since I am mapping the loader path as
    PHP Code:
    Ext.Loader.setConfig({
        
    enabledtrue,
        
    paths: {
            
    'App''app'

                
    etc...
        }
    }); 
    so my override needed to be in app/sass/var/App/view/Main.scss rather than app/sass/var/view/Main.scss.

    I am spelling that out in case others fall into the same trap.

    Thanks for your reply, much appreciated.

    Murray

  3. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Check out the section "Styling Your Application" in our Theming Guide.

    You'll want to override the $base-color variable in whatever your main view is.

    For example, in the demo app generated by Sencha Cmd, the main view is app/view/Main.js, so you'd place the override in app/sass/var/view/Main.scss.

    Regards,
    Brian

  4. #3
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Answers
    4

    Default

    Quote Originally Posted by lumberjack View Post
    For example, in the demo app generated by Sencha Cmd, the main view is app/view/Main.js, so you'd place the override in app/sass/var/view/Main.scss
    Thanks Brian. I was making a dumb mistake. My Main.js is defined as 'App.view.Main' since I am mapping the loader path as
    PHP Code:
    Ext.Loader.setConfig({
        
    enabledtrue,
        
    paths: {
            
    'App''app'

                
    etc...
        }
    }); 
    so my override needed to be in app/sass/var/App/view/Main.scss rather than app/sass/var/view/Main.scss.

    I am spelling that out in case others fall into the same trap.

    Thanks for your reply, much appreciated.

    Murray

Posting Permissions

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