Ich verwende derzeit Polymer als mein Frontend-Entwicklungsframework. Ich liebe SASS. Jetzt verstehe ich, dass ich eine Sass-Datei erstellen und sie wie gewohnt importieren kann.
Allerdings habe ich mir angewöhnt, Style-Tags in meinen Web-Komponenten zu verwenden.
Grundsätzlich ist der Workflow, den ich suche, in der Lage zu sein, einfach ein Skript-Tag innerhalb meiner Web-Komponente zu definieren, vielleicht add type = 'sass; zu ihm. Dann grunzen Sie alles und kompilieren Sie alle meine SASS innerhalb dieser Tags, bevor Sie die Dateien in mein .tmp-Verzeichnis ausgeben.
Ist so etwas mit Grunt oder Gulp möglich? Wenn ja, was sind die besten Module, um mir dabei zu helfen?
Meine Implementierung basiert auf dem Ersetzen eines Tags in der Polymer-HTML-Datei. Ich verwende gulp , könnte aber geändert werden, um einfach fs zu verwenden.
Die Dateistruktur sollte wie in diesem Beispiel aussehen:
%Vor%app-view.html:
%Vor%app-view.scss:
%Vor%gulpfile.js:
%Vor%ERGEBNIS:
%Vor%Zuallererst, eine Million Dank und Dank geht an David Vega , um zu zeigen, wie es gemacht wird! Ich habe einige Anpassungen vorgenommen und den Code ein wenig optimiert.
Hier ist der GitHub für die Datei! Ссылка
Nun, das hat eine Weile gedauert. Hier kommt's!
Polymer entfesselt Version 1.1. Auf seiner Website :
Hinweis: Style-Module wurden in Polymer 1.1 eingeführt; sie ersetzen die experimentelle Unterstützung für externe Stylesheets.
Stattdessen unterstützen sie jetzt "shared styles".
Dies bedeutet, dass wir .html-Dateien mit CSS-Inhalt importieren können. Das Problem ist, dass wir den normalen Weg nicht gehen können.
Zum Glück ist hier eine einfachere Lösung.
Was das folgende Skript tut, ist, dass es Ihre .scss-Dateien erhält, analysiert und in den gemeinsamen Stil ".html" einfügt.
Hier ist der Code. Darunter ist es Schritt für Schritt, wie man es benutzt und einrichtet:
%Vor%1) Richten Sie Ihr Element ein:
Angenommen, Sie haben ein Element namens "Heldenturnier":
%Vor%Und Sie möchten Ihre .scss-Datei in sie einfügen.
Erstelle außerdem zwei neue Dateien:
%Vor%In der ersten Datei, held-tournament-style.html schreibe folgendes:
%Vor%Beachten Sie:
%Vor%Kommentare?
Diese sind SUPER wichtig , da alle CSS in diese gehen werden. Diese sind Groß- / Kleinschreibung, aber nicht positionsabhängig. Stellen Sie sicher, dass Sie in Ihre Vorlagen-Tags und außerhalb Ihrer style -Tags einschließen.
Dann nimm auf deiner Heldenturnier-style.scss-Datei dein CSS: (Beispiel)
%Vor%2) Run Gulp:
%Vor%Bam! Du wirst sehen, dass deine "held-tournament-style.scss" -Datei mit deinem CSS überschrieben wird !!!
%Vor%Jetzt können Sie diese Datei überall beziehen !!! Erinnerst du dich an dein erstes Element, das Original ("held-tournament.html")? Mach folgendes:
%Vor%Einige letzte Anmerkungen:
Verwenden von SASS Imports Die Verwendung von Sass-Importen ist einfach, man muss nur auf Folgendes achten:
In der gulpfile gibt es eine Variable namens: "includePaths". Es ist ein Array, in dem nodeSass nach allen Importen sucht. Wenn Sie Ihren Import an keinem der genannten Orte angeben, verhindert , dass Ihre Datei injiziert und kompiliert wird . Standardmäßig befindet sich im Skript ein 'app / style'-Verzeichnis, das danach sucht.
Ordnerstruktur Die Ordnerstruktur ist wichtig und kann nach Ihren Wünschen angepasst werden. Dies setzt voraus, dass sich deine Elemente in einem "app" -Ordner befinden, der deiner gulpfile (In derselben Hierarchie) entspricht:
%Vor%Wenn Sie Ihre Ordnerstruktur ändern möchten, ändern Sie die Variable "basePath". Achte darauf, nach "/" zu suchen, damit du deine Struktur nicht durcheinanderbringst!
Wie starte ich meine gulpfile? Es ist einfach: Rufen Sie die "watchSass" -Methode zum Anschauen auf, oder "injectSass", um sie einmal zu benutzen.
%Vor%Weitere Informationen auf der GitHub-Seite !!!
In Polymer 2.0 ist es auch möglich, ein Stylesheet einfach in die Vorlage des Elements zu importieren:
%Vor%Innerhalb des Stylesheets können Sie Ihren Inhalt wie im Style-Tag formatieren. Die Stile betreffen nur das Element und seinen Inhalt. Wenn Sie SASS, Stylus, LESS oder ähnliches verwenden möchten, müssen Sie nur eine Middleware verwenden (HOWTO: Stack Overflow ) in Express, der den SASS-Code bei jeder Anfrage in CSS umwandelt. Ich bevorzuge diese Lösung gegenüber der GULP / GRUNT-Aufgabe, weil ich denke, dass es viel einfacher ist, weil Sie die Aufgabe nicht immer ausführen müssen, da die Middleware automatisch kompiliert wird, wenn sie benötigt wird.
Ich hoffe, das hilft dir