Kompilieren Sie scss zu scss und wenden Sie keine Funktionen an, die nicht definiert sind

Question

Es gibt ein Ruby-on-Rails-Projekt mit vielen scss-Dateien. Bilder, die in cloudnary.com cdn gespeichert sind. Innerhalb Quelle SCSS Dateien gibt es eine solche Konstruktion:

.test { 
    background-image: cloudinary-url("somepic.png",$width:10,$height:10); 
} 

Dann versuchen wir, alle SCSS Dateien in eine große SCSS zu kompilieren. Cloudinary-Juwel sollte die korrekte URL während der Bereitstellung ersetzen.

Dies alles funktionierte vor dem Update, mit alten Knoten, Gulp-Sass und Node-Sass-Bibliotheken, aber jetzt müssen wir neue Versionen verwenden. Und jetzt funktioniert es nicht.

Hier ist der Fehler: Function cloudinary-url doesn't support keyword arguments

Die Funktion cloudinary-url wirklich nicht während der Kompilierung definiert. Das Ziel ist es, die Verarbeitung nicht definierter Funktionen irgendwie zu überspringen. Also sollten wir in der kompilierten scss-Datei die gleichen background-image: cloudinary-url("somepic.png",$width:10,$height:10); haben wie in den Quelldateien. Wie geht das?

Answer 1

Wenn ich richtig verstanden habe, kompilieren Sie die Sass mit Node und später das Ergebnis in eine Rails App. Vielleicht müssen Sie eine benutzerdefinierte Funktion in der Node-Sass-Konfiguration Ihrer Node-Anwendung definieren. So etwas wie (ungetestet!):

functions: { 
    "cloudinary-url": function(publicId, sassOptions) { 
    var options = {} 
    var i, l, key, value; 

    for (i = 0, l = sassOptions.getLength(); i < l; i++) { 
     key = sassOptions.getKey(i); 
     value = sassOptions.getValue(i); 
     options[key] = value 
    } 
    return new sass.types.String(cloudinary.url(publicId.getValue(), options)); 
    } 
} 

einschließen und die Cloudinary Node SDK in Ihrem Knoten App konfigurieren, die sass kompiliert. Siehe auch node-sass samples.

Wenn Sie jedoch die cloudinary-url wie in der Rails App übergeben möchten, empfehle ich, es als Kommentar hinzuzufügen und es in der Nachbearbeitung zu ersetzen (z. B. mit gulp-replace).

.test { 
    background-image: url(dummy.jpg); //cloudinary-url("somepic.png",$width:10,$height:10); 
} 

... und in Zug, nach dem sass Kompilieren ...

.pipe(replace('url(dummy.jpg); //', ''))