wie man Änderungen im gesamten Verzeichnis / Ordner mit vielen Sass-Dateien beobachtet

77

Wie kann ich Änderungen im gesamten Verzeichnis mit vielen Sass-Dateien verfolgen? Ich verwende den folgenden Befehl, um Änderungen in sass zu beobachten

Datei:

sass --watch style.scss:style.css

Aber wie man Änderungen im gesamten Verzeichnis / Ordner mit vielen Sass-Dateien beobachtet.

— JA9
quelle

5

Hat Ihnen eine der Antworten hier geholfen?

— TheCarver

95

Verwenden Sie einfach den Befehl sass --watch <input folder>:<output folder>wie folgt:

$ ls -l
css/ sass/
$ sass --watch sass:css

Wo <input folder>enthält die Sass-Dateien und <output folder>das hostet die generierten CSS-Dateien.

— piouPiouM
quelle

Wenn ich einen sassOrdner mit 20 Unterverzeichnissen und insgesamt 200 scssDateien darin habe, welche Auswirkungen hätte sass --watchdies in diesem Fall auf die CPU- / Speicherressourcen?

— WM

@piouPioum, ich habe den von Ihnen erwähnten Befehl ausprobiert, der die Änderung erkennt, aber nicht schreibt.

— Vivek

Es heißt, dass keine Option mit dem Namen "watch" gefunden werden konnte. . Ich weiß nicht, was ich tun soll, ich kann nicht glauben, dass ich keinen Watcher ausführen kann, ohne externe Programme zu installieren oder einen Task Runner zu verwenden

— Cristian Traìna

28

Erweitern Sie die Antwort von piouPiouM ein wenig:

Ausgabedateien werden mit denselben Namen wie Eingabedateien erstellt, außer mit .css.
<input folder>und <output folder>kann das gleiche sein.
Beide Ordner können das aktuelle Arbeitsverzeichnis sein, daher gilt Folgendes:

$ sass --watch .:.

— Gary Robertson
quelle

11

Gehen Sie zu Ihrem Terminal und gehen Sie zu Ihrem Ordner. Dann schreiben Sie:

 sass --watch .

Dadurch werden alle Sass-Dateien überwacht und in CSS-Dateien mit demselben Namen konvertiert. Sie können es auch so machen:

sass --watch ~/user/youUser/workspace/project/styles/

Ich hoffe das kann dir helfen.

— David.Cruz
quelle

10

Am Ende habe ich das ohne Grunt oder Sass-watch gemacht:

npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css

— Matsko
quelle

1

Installieren Sie sass in Ihrem Arbeitsverzeichnis? Wenn es auf Systemebene installiert ist, muss ich den gesamten Pfad eingeben? Also ...sass --watch /Users/estout/Documents/GIT/project/:/Users/estout/Documents/GIT/project/

— erwstout

@buschschwick: Ja, Sie installieren es auf Systemebene. Sie geben entweder jedes Mal die vollständige Adresse ein, wie Sie es cd /Users/estout/Documents/GIT/project/$ sass --watch .:.

— getan

5

Wenn Sie sich in Ihrem aktuellen Ordner befinden, gehen Sie wie folgt vor, um ihn anzusehen.

F:\sass tutorial>sass --watch ./:./

— Saransh Mehra
quelle

3

Nur für den Fall, dass 2018 jemand mit diesem Problem
konfrontiert wird: Die sass-Website bezieht sich auf Ruby Sass , das veraltet ist . und wie jetzt (Mai 2018), wenn Sie Dart Sass über npm installieren , unterstützt es keinen --watchBefehl

Was zu tun ist:
Sie müssen node-sassglobal installieren , wie:

npm install node-sass -g

Starten Sie anschließend die Befehlszeile neu und verwenden Sie den folgenden Code:

node-sass --watch scss/styles.scss css/styles.css

um deine Scass-Dateien in CSS zu kompilieren.
Grundsätzlich unterstützt Node-Sass --watchBefehle und wir verwenden diese, um unsere SCSS-Codes in reguläre CSS-Dateien zu kompilieren.

und nur für den Fall, dass Sie beim ersten Speichern Ihrer .scss-Datei eine solche Fehlermeldung erhalten:

{
  "status": 3,
  "message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
  "formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}

Was Sie tun müssen, ist es erneut zu speichern, es wird richtig funktionieren!

— a_m_dev
quelle

2

Sie können eine Sass-Datei erstellen, die den Rest der Dateien enthält, und diese Datei dann einfach ansehen.

Schauen Sie sich alternativ Grunt und das sehr gute Grunt-Contrib-Kompass- Plugin an

— kumarharsh
quelle

@matsko ja, das ist in der Tat, was der grunt watchtut

— Kumarharsh

Am

— matsko

Sie möchten keine einzige SASS-Datei für mein aktuelles Projekt. Dies ist ein schlechter Vorschlag / eine schlechte Antwort. Viel einfacher ist es, SASS zu bitten, ein Verzeichnis anzusehen, das andere in ihren Antworten angegeben haben.

— TheCarver

2

Sie können eine Master - SASS - Datei für das Projekt wollen, die alle Komponenten SASS Dateien des Kindes enthält (Blick darauf , wie Bootstrap tut es). Es gibt auch eine große Gefahr bei der aktuell akzeptierten Antwort, dass alle Sass-Dateien kompiliert und eine CSS-Datei für jede Sass-Datei ausgegeben wird (Partials ausgeschlossen). Das ist vielleicht nicht das, was Sie wollen.

— Kumarharsh

2

Entsprechend den Informationen können Sie die nächste Befehlszeile verwenden:

sass --watch .

Quelle: http://sassbreak.com/watch-your-sass/#what-does---watch-do

— Moises Portillo
quelle

0

Sie können sass so einstellen, dass alle .scss-Dateien (in meinem Fall habe ich mehrere .scss-Dateien im Ordner src / static) kompiliert werden, aber bevor Sie sie global installieren:

npm i -g sass

Gehen Sie dann zum Projektordner und geben Sie den folgenden Befehl ein:

sass --watch $(pwd)/src/static

Sie können es auch in ein npm-Skript in package.json einbinden, wie z

 "scripts": {
    "sass:watch": "sass --watch $(pwd)/src/static"
    }

und führen Sie es mit diesem Befehl aus:

npm run sass:watch

— Artem Fedotov
quelle