webEdition IDs in CSS und JS Dateien einbinden

Generelles Vorgehen

Seit webEdition 6.3.9 können IDs von webEdition Dokumenten und Grafiken auch in CSS (less/sass) und Javascript Dateien eingesetzt werden. Wurde früher im CSS folgendes geschrieben:

html, body {
background: url("http://documentation.webedition.org/wiki/lib/tpl/dokuwiki/images/page-gradient.png") repeat-x #FBFAF9;
color: #333333;
margin: 0px;
padding: 0px;
}

Kann dies nun so geschrieben werden:

html, body { 
background: url("#WE:7766#") repeat-x #FBFAF9;
color: #333333;
margin: 0px;
padding: 0px;
}

Damit die ID auch wirklich ersetzt wird, muß bei der CSS/JS Datei auf der Eigenschaftsseite noch die Checkbox "Datei von Parser verarbeiten lassen" aktiviert werden.

Wurden nun die Grafiken verschoben, müssen die Pfade nicht mehr händisch angepaßt werden, es muß (aktuell) lediglich eine Rebuild aller statischen Dokumente erfolgen.

Aktuelle Liste der Ersetzungen

In den Eigenschaften eines CSS/JS Dokumentes gibt es einen Reiter mit den aktuellen Ersetzungen.

Einbinden in SCSS/LESS

Die Einbindung von Dateien in LESS und SCSS funktioniert in gleicher Weise wie auch bei normalen CSS Dateien. Zusätzlich können in den CSS-Präprozessoren import-Anweisungen ebenfalls mit den internen webEdition-ID's angegeben werden. In SCSS sieht das bspw. so aus:

$mainColor:#00005C;
@import '#WE:18823#';

Header von JS/CSS Dateien

Es kann nützlich sein, in das Header von js/css Dateien einfach folgenden Kommentar einzufügen, damit man immer schnell das richtige Dokument erwischt:

/*
ID:     #WE:ID#
Path: #WE:Path#
Date: #WE:Date#
*/