指南针内联图像 syntax/configuration

Question

我将以下块添加到 myapp.scss：

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

使用 Cmd 6.0.1.76 调用 sencha app build production 后，我看到了背景图像。我发现你可以使用 inline-image 并且罗盘应该从你的图像中制作 css 内联图像。所以我改为添加到 myapp.scss：

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

构建成功后，我看不到图像。

我发现 MyApp-all.css 仍然包含 inline-image('../resources/ressource2.png')，就好像它不能正确替换它们一样。我是否缺少启用内联图像生成所需的一些配置选项？

Answer 1

在阅读 SenchaCon roadshow agenda 时，我或多或少地找到了答案。

总结：

Cmd 6.0.1 不再使用 sass 或指南针。它使用 Sencha Fashion，它获取 sass 文件并编译它们。 Sencha Fashion 确实支持 sass 变量，但不支持用 Ruby 编写的指南针助手，因为目标是删除 Ruby 依赖项。相反，必须将所需的助手重写为 JavaScript.

中的 Sencha Fashion 扩展

~~我还没有找到 available/builtin "extensions" 的列表和如何编写我自己的完整指南。~~ 没有 javascript 目前在 ext 包中可用的扩展。没有包含所有内置 SASS 函数及其参数的文档，您只能通过搜索随 ExtJS 提供的原始 scss 文件找到它们。

扩展示例：

如果你想要一个将资源图像转换为它们的等效数据 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 文件）。

scss文件中的inlineImage现在引用注册的javascript函数inlineImage，会执行下载图片return作为数据uri.

来源：

What's new in ExtJS6: Sencha Fashion
How to style apps with Fashion
How to style apps with Fashion (Alternate source)
Sencha Forum question: Where to find Sencha Fashion apidocs/specs?，现在正试图将其演变成 "let us make a sample extension" 线程。

指南针内联图像 syntax/configuration

Compass inline-image syntax/configuration

css

extjs

sass

compass

sencha-fashion