1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    198
    Vote Rating
    2
    TampaBay55 is on a distinguished road

      0  

    Default Errors while compiling SASS

    Errors while compiling SASS


    Greetings all:

    I copied the code for a new UI from a theming article to test it out. Added the line to import the UI into my main SASS file and attempted to compile. I get SEVERAL errors regarding theme images not being found. Now I am a bit confused....

    UI SASS
    Code:
    @include extjs-button-ui(
        /* UI + Scale */
        'green-small',
        $border-radius: $button-small-border-radius,
        $border-width: $button-small-border-width,  
        $border-color: green,
        $border-color-over: green,
        $border-color-focus: green,
        $border-color-pressed: green,
        $border-color-disabled: green,
        $padding: $button-small-padding,
        $text-padding: $button-small-text-padding,
        $background-color: green,
        $background-color-over: green,
        $background-color-focus: green,
        $background-color-pressed: green,
        $background-color-disabled: green,
        $background-gradient: $button-default-background-gradient,
        $background-gradient-over: $button-default-background-gradient-over,
        $background-gradient-focus: $button-default-background-gradient-focus,
        $background-gradient-pressed: $button-default-background-gradient-pressed,
        $background-gradient-disabled: $button-default-background-gradient-disabled,
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-pressed: $button-default-color-pressed,
        $color-disabled: $button-default-color-disabled,
        $font-size: $button-small-font-size,
        $font-size-over: $button-small-font-size-over,
        $font-size-focus: $button-small-font-size-focus,
        $font-size-pressed: $button-small-font-size-pressed,
        $font-size-disabled: $button-small-font-size-disabled,
        $font-weight: $button-small-font-weight,
        $font-weight-over: $button-small-font-weight-over,
        $font-weight-focus: $button-small-font-weight-focus,
        $font-weight-pressed: $button-small-font-weight-pressed,
        $font-weight-disabled: $button-small-font-weight-disabled,
        $font-family: $button-small-font-family,
        $font-family-over: $button-small-font-family-over,
        $font-family-focus: $button-small-font-family-focus,
        $font-family-pressed: $button-small-font-family-pressed,
        $font-family-disabled: $button-small-font-family-disabled,
        $icon-size: $button-small-icon-size
    );
    Code:
    // Unless you want to include all components, you must set $include-default to false
    // IF you set this to true, you can also remove lines 10 to 38 of this file
    $include-default: false;
    
    /**
     * Toolbar Configuration
     **/
    $toolbar-background-color: #0B5FA5 !default;
    $toolbar-background-gradient: #0B5FA5 !default;
    $toolbar-inner-border-width: 1px 0px 0px !default;
    $toolbar-inner-border-color: #0B5FA5 !default;
    $toolbar-footer-vertical-spacing: 2px !default;
    $toolbar-border-color: 0B5FA5 !default;
    $toolbar-spacer-width: 2px !default;
    $toolbar-separator-color: #808080 !default;
    $toolbar-separator-highlight-color: #fff !default;
    $toolbar-text-font-family: tahoma,arial,verdana,sans-serif !default;
    $toolbar-text-font-size: 11px !default; //11px
    $toolbar-text-font-weight: normal !default;
    $toolbar-text-color: #F9F9F9 !default;
    $toolbar-text-padding: 3px 4px 0 4px !default;
    $toolbar-text-line-height: 16px !default;
    /**
     * Toolbar Button Configuration
     **/
    $button-toolbar-color: #F9F9F9 !default;
    $button-toolbar-color-over: $button-toolbar-color !default;
    $button-toolbar-color-focus: $button-toolbar-color-over !default;
    $button-toolbar-color-pressed: $button-toolbar-color !default;
    $button-toolbar-color-disabled: lighten($button-toolbar-color, 35) !default;
     
     
     
    @import 'ext4/default/all';
    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    @import 'tb-buttons'; 
    // This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
    // You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
    // This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
    // The value can either be true, in which case the image path will be "../images/"
    // or a string, of where the path is
    $relative-image-path-for-uis: true; // defaults to "../images/" when true
    Attached a screenshot of the errors I am getting. Any ideas??? Thanks.compass errors.png

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is the path valid?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    294
    Vote Rating
    2
    maitreya.karandikar is on a distinguished road

      0  

    Default


    I am also getting the same error while generating the custom "ui".

    any solution ??