Kompilieren Sie mehrere SASS-Dateien in mehreren Verzeichnissen in mehrere CSS-Dateien in einem separaten Verzeichnis

Question

Ich muss mehrere SASS-Dateien in einem Verzeichnis in mehrere entsprechende CSS-Dateien in einem anderen Verzeichnis kompilieren. ZB:

src/folder1/file1.scss --compiles to-- public/file1.css 
src/folder2/file2.scss --compiles to-- public/file2.css 

Hier ist der Befehl, die ich benutze:

./src/*/*.scss ./public 

Vor dies zu versuchen, war ich alle .scss Dateien anstelle Kompilieren nur ./src/*/*.scss verwendet und wurde immer die entsprechenden CSS-Dateien in ihren jeweiligen Verzeichnissen. Der Versuch, diese in einem anderen Verzeichnis abzulegen, funktioniert jedoch nicht. Was stattdessen passiert, ist, dass eine der .scss-Dateien eine .scss-partielle Importanweisung in die .scss-Datei selbst importiert, eine .scss.map-Datei erstellt wird und danach nichts mehr passiert.

Hat SASS überhaupt diese Fähigkeit? Ich habe verschiedene Variationen des obigen Befehls ausprobiert und gelegentlich sehe ich einen Fehler, der besagt, dass "public" ein Verzeichnis ist, was mich glauben lässt, dass SASS kein Verzeichnis als Ausgabe erlaubt. Die Dokumentation enthält nur eine einzige Ausgabedatei als Beispiel für das Kompilieren von SASS (d. H. Sass input.scss output.css).

Ich bin mit NPM-Skripte als Build-Tool also bitte keine Grunt, Gulp, usw.

* Eine andere Sache zu beachten. Ich habe gerade versucht sass --watch anstelle des normalen Kompilierungsbefehl verwenden, und es ist eine Art tut, was ich brauche, um es zu:

sass --watch src:public

Das einzige Problem, das ich mit diesem habe, ist, dass es nicht nur schafft CSS-Dateien in der Öffentlichkeit. Stattdessen erstellt es einen Ordner und eine .css- und .css.map-Datei im Ordner. Es scheint, dass SCSS für jede .scss-Datei einen Pfad entsprechend dem relativen Pfad hinzufügt, der von watch durchlaufen wird. Diese Lösung wäre ideal, wenn Sie diesen zusätzlichen Ordner nicht erstellen würden.

Answer 1

Sie haben die sass Uhr sagen, welche Datei Sie es ausgeben möchten, wie folgt aus:

sass --watch style.scss:style.css 

können Sie sogar für jede zur Ausgabe geschieht eine komprimierte CSS-Datei (die .map-Datei festgelegt automatisch css):

sass --watch style.scss:style.css --style compressed 

normalerweise gehe ich in eine Datei, aber theoretisch kann man verschiedene SCSS Dateien anschauen und kompilieren sie CSS-Dateien zu trennen, nicht sicher, warum Sie wollen würde, um ?, aber es kann getan werden.

Für alles, was Sie gruppieren möchten, importieren Sie die zugehörigen Dateien in eine scss-Datei, kompilieren Sie sie dann in eine Datei und wiederholen Sie diese Schritte.

(Anmerkung: Ich bin die sass Juwel für die oben genannten Befehle in Knoten ausgeführt wird.)

Answer 2

Sie können mehrere sass Dateien in mehrere CSS-Dateien zusammenstellen, indem mehrere Quelle festgelegt wird: Ausgabe von einem Leerzeichen wie folgt getrennt:

sass --watch src/file1.scss:dist/file1.css src/file2.scss:dist/file2.css 

Sie können die Quell- oder Ausgabepfade nach Bedarf ändern.