Compass Inline Image Syntax / Configuration

Question

I will add the following block to myapp.scss:

.resourceType2 { 
    background: url('../resources/ressource2.png') no-repeat 2px 1px; 
    padding-left: 16px; 
}

After calling sencha app build productionwith Cmd 6.0.1.76, I see a background image. I found that you can use inline-image, and the compass should do css inline images from your images. Therefore, I add instead myapp.scss:

.resourceType2 { 
    background: inline-image('../resources/ressource2.png') no-repeat 2px 1px; 
    padding-left: 16px; 
}

After a successful build, I do not see the image.

I found that MyApp-all.cssit still contains inline-image('../resources/ressource2.png')as if it had not replaced them properly. Are there any configuration options needed to enable the embedded image?

Answer 1

Roadshow SenchaCon .

:

Cmd 6.0.1 . Sencha Fashion, sass . Sencha Fashion sass, , Ruby, Ruby. Sencha Fashion JavaScript.

/ "" . ext javascript. , SASS , scss, ExtJS.

:

, uri , sass/src, . inlineimage.js:

exports.init = function(runtime) {
    if (typeof String.prototype.endsWith !== 'function') {
        String.prototype.endsWith = function(suffix) { 
            return this.indexOf(suffix, this.length - ((suffix && suffix.length) || 0)) !== -1; 
        };
    }
    function _arrayBufferToBase64( buffer ) {
        var binary = '';
        var bytes = new Uint8Array( buffer );
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return window.btoa( binary );
    }
    runtime.register({
        inlineImage: function (uri, mime) {
            // URI has the keys: value,unit,quoteChar,splat
            // URI has the values: ../../resources/delete.gif,,',
            if(!mime) {
                if(uri.value.toLowerCase().endsWith(".png")) mime = "image/png";
                else if(uri.value.toLowerCase().endsWith(".gif")) mime = "image/gif";
                else if(uri.value.toLowerCase().endsWith(".jpg")) mime = "image/jpeg";
                else if(uri.value.toLowerCase().endsWith(".jpeg")) mime = "image/jpeg";
            }
            var xhr = new XMLHttpRequest();
            xhr.open('GET', uri.value, false); 
            xhr.responseType = "arraybuffer";
            xhr.send(null);
            if(xhr.status==404) throw new Error("Inline image source " + uri.value + " not found");
            uri.value="url(data:"+mime+";base64,"+_arrayBufferToBase64(xhr.response)+")";
            uri.quoteChar="";
            return uri;
        }
    });
};

scss, sass/src/view/Viewport.scss, :

require("../inlineimage.js");
.icon-checklist {
    background: inlineImage('../images/checklist.png') no-repeat center center !important;
}

sass/images, cmd resource ( CSS).

inlineImage scss javascript inlineImage, uri .

:

• ExtJS6: Sencha Fashion
• ( )
• Sencha Forum: Sencha Fashion apidocs/specs?, " ".