4

我将以下块添加到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并且 compass 应该从您的图像中制作 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')，就好像它不会正确替换它们一样。我是否缺少启用内联图像生成所需的一些配置选项？

4

1 回答 1

1

在阅读SenchaCon 路演议程时，我或多或少地偶然发现了答案。

概括：

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

我还没有找到可用/内置“扩展”的列表以及如何编写自己的完整指南。到目前为止，ext 包中没有可用的 javascript 扩展。没有关于所有内置 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 文件中）。

现在inlineImagescss 文件中的 引用了注册的 javascript 函数inlineImage，该函数将被执行以下载图像并将其作为数据 uri 返回。

资料来源：

于 2015-10-02T08:40:30.170 回答