Implementierung der Kompilierung von WeChat-Applet-freien Dateien in WXSS-Dateien

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Kompilieren der WeChat-Applet-WXSS-Datei vorgestellt. Die spezifische Implementierungsmethode finden Sie hier

weniger Die Datei wird in eine WXSS-Datei des WeChat-Miniprogramms kompiliert

Am 21. September 2016 begann das WeChat-Miniprogramm offiziell mit internen Tests. Im WeChat-Ökosystem haben leicht zugängliche und sofort einsatzbereite WeChat-Miniprogramme große Aufmerksamkeit erregt und den Freundeskreis erweitert. In einer so heißen Atmosphäre probiere ich als Front-End-Entwickler auch in aller Stille neue Dinge aus.

Während der Erstellung eines kleinen Demo-Beispiels habe ich etwas äußerst Peinliches entdeckt: **Wie man Less/Sass-Dateien in WXSS-Dateien für kleine Programme konvertiert**.

Für mich, die ich grundsätzlich kein natives CSS verwende und es gewohnt bin, weniger zu schreiben, macht das meinen Schreibstil ziemlich schwierig.

Nachdem ich versucht hatte, Koala zu konfigurieren (ein Tool, das Less/Sass kompilieren kann) und verschiedene Informationen durchsucht hatte, fand ich endlich eine praktikable Methode. Ich werde weniger als Beispiel verwenden, um es mit Ihnen zu teilen. Sass ist auch möglich.

Umgebungsanforderungen:

- webstrom
- nodejs

Spezifische Schritte

1. Verwenden Sie den Befehl nodejs, um weniger zu installieren.

Geben Sie im NodeJS-Befehlsfenster Folgendes ein: npm install less -g und drücken Sie dann die Eingabetaste, um die Installation durchzuführen. Wie unten gezeigt:

2. Webstrom-Konfiguration

1). , Datei —> Einstellungen.

2). Erweitern Sie das letzte Element in der Liste auf der linken Seite und suchen Sie nach File Watchers. Wir können das weiße Feld auf der rechten Seite sehen, dann auf das Symbol „Hinzufügen“ klicken und „Weniger“ auswählen. Wie im Bild gezeigt:

3). Im geöffneten Feld sehen wir einige verwandte Konfigurationen. Wir müssen uns nicht um andere Dinge kümmern. Wir müssen nur auf zwei Stellen achten: den Programmpfad und den Ausgabepfad. Der Programmpfad ist der kleinere Pfad, den ich zuvor installiert habe. Ändern Sie den Ausgabepfad und ändern Sie die ursprüngliche Standard-CSS in .wxss. Wie unten gezeigt:

4).

3. Überprüfung

1). Wenn Sie eine weniger Datei hinzufügen, werden wir feststellen, dass der Editor mir automatisch eine entsprechende WXSS-Datei hinzufügt.

2). Schreiben Sie die weniger Datei, speichern Sie sie, öffnen Sie dann die WXSS-Datei und stellen Sie fest, dass die Kompilierung erfolgreich ist. Dann sind wir fertig.

Moment mal! Unser Wxss sieht schrecklich aus!

Keine Panik, es gibt eine Lösung:

1). Öffnen Sie die Webstrom-Einstellungen und suchen Sie unter „Editor“ nach „Datei- und Codevorlagen“:

2). Klicken Sie auf das Symbol „Hinzufügen“, geben Sie „wxss“ in das Eingabefeld für die Erweiterung ein und klicken Sie auf „Übernehmen“.

3) Wählen Sie im Popup-Dateitypfeld CSS aus.

4). Öffnen Sie unser WXSS und stellen Sie fest, dass es mit CSS identisch ist.

Hier verwende ich nur weniger als Beispiel. Wenn Sie es brauchen, können Sie es selbst machen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Implementierung der Funktion zum Hochladen mehrerer Bilder im WeChat-Miniprogramm

WeChat-Miniprogramm Einführung in die globale Konfiguration der Entwicklung

Das obige ist der detaillierte Inhalt vonImplementierung der Kompilierung von WeChat-Applet-freien Dateien in WXSS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!