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.

css sass build-process watch JA9
quelle
5
Hat Ihnen eine der Antworten hier geholfen?
TheCarver

Antworten:

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
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