# { } scss-to-css
### Kompilieren Sie alle SCSS-Dateien rekursiv in minimiertes CSS.
## ⚡ Installation
Als **globales Dienstprogramm**:
```
$ npm install -g @adamlui/scss-to-css
```
Als **Entwicklerabhängigkeit** (z.B. für Build-Skripte) aus Ihrem Projektstammverzeichnis:
```
$ npm install -D @adamlui/scss-to-css
```
Als **Laufzeitabhängigkeit** (z.B. für die spontane Kompilierung) aus Ihrem Projektstammverzeichnis:
```
$ npm install @adamlui/scss-to-css
```
## 💻 Verwendung der Befehlszeile
Der grundlegende **globale Befehl** lautet:
```
$ scss-to-css
```
Beispielausgabe:
**📝 Hinweis:** Quellkarten werden ebenfalls standardmäßig generiert, es sei denn, `-S` oder `--no-source-maps` wird übergeben.
#
So geben Sie **Eingabe-/Ausgabepfade** an:
```
$ scss-to-css [eingabepfad] [ausgabepfad]
```
- `[eingabepfad]`: Pfad zur SCSS-Datei oder zum Verzeichnis, das die zu kompilierenden SCSS-Dateien enthält, relativ zum aktuellen Arbeitsverzeichnis.
- `[ausgabepfad]`: Pfad zur Datei oder zum Verzeichnis, in dem die CSS- und Source-Map-Dateien gespeichert werden (relativ zum Eingabeverzeichnis). Falls nicht angegeben, wird `css/` verwendet.
**📝 Hinweis:** Wenn Ordner übergeben werden, werden Dateien rekursiv verarbeitet, es sei denn, `-R` oder `--no-recursion` wird übergeben.
#
Zur Verwendung als **Paketskript** in der `package.json` Ihres Projekts:
```json
"scripts": {
"build:css": ""
},
```
Ersetzen Sie `` durch `scss-to-css` + optionale Argumente. Anschließend kann `npm run build:css` verwendet werden, um den Befehl auszuführen.
#
### Beispielbefehle
Kompilieren Sie alle SCSS-Dateien im **aktuellen Verzeichnis** (Ausgaben nach `css/`):
```
$ scss-to-css
```
Kompilieren Sie alle SCSS-Dateien in einem **bestimmten Verzeichnis** (Ausgaben in `css/pfad/zu/ihrem/verzeichnis/`):
```
$ scss-to-css pfad/zu/ihrem/verzeichnis
```
Kompilieren Sie eine **spezifische Datei** (Ausgaben in `css/pfad/zu/ihrem/datei.min.css`):
```
$ scss-to-css pfad/zu/ihrem/datei.scss
```
Geben Sie sowohl **Eingabe- als auch Ausgabeverzeichnisse** an (Ausgaben in `ausgabeordner/`):
```
$ scss-to-css eingabeordner ausgabeordner
```
**📝 Hinweis:** Ausgabe-CSS wird minimiert, sofern nicht `-M` oder `--no-minify` übergeben wird.
#
### Befehlszeilenoptionen
```
Boolesche Optionen:
-n, --dry-run Kompilieren Sie die Datei(en) nicht wirklich, sondern zeigen Sie nur an, ob sie verarbeitet werden.
-d, --include-dotfolders Beziehen Sie Punktordner in die Dateisuche ein.
-S, --no-source-maps Verhindern Sie, dass Quellkarten generiert werden.
-M, --no-minify Deaktivieren Sie die Minimierung des Ausgabe-CSS.
-R, --no-recursion Deaktivieren Sie die rekursive Dateisuche.
-r, --relative-output Ausgabedateien werden relativ zu jeder Quelldatei anstatt zum Eingabeverzeichnis erstellt.
-c, --copy Kopieren Sie kompiliertes CSS in die Zwischenablage, anstatt in eine Datei zu schreiben, wenn eine einzelne Quelldatei verarbeitet wird.
-q, --quiet Unterdrücken Sie alle Protokolle außer Fehlern.
Parameteroptionen:
--ignores="dir/,file1.scss,file2.sass" Dateien/Verzeichnisse, die von der Kompilierung ausgeschlossen werden sollen.
--comment="comment" Header-Kommentar dem kompilierten CSS voranstellen. Mit '\n' zeilenweise trennen.
--ui-lang="code" ISO 639-1-Code der Sprache, in der die Benutzeroberfläche angezeigt werden soll.
--config="path/to/file" Benutzerdefinierte Konfigurationsdatei laden.
Befehle:
-i, --init Konfigurationsdatei erstellen (im Projektstammverzeichnis).
-h, --help Hilfebildschirm anzeigen.
-v, --version Versionsnummer anzeigen.
--stats npm-Statistiken anzeigen.
--debug [targetKey] Debug-Protokolle anzeigen.
```
#
### Konfigurationsdatei
**scss-to-css** kann mithilfe einer Datei namens `scss-to-css.config.mjs` oder `scss-to-css.config.js` im Projektstammverzeichnis angepasst werden.
Beispiel für Standardeinstellungen:
```js
export default {
dryRun: false, // Die Dateien nicht tatsächlich minimieren, sondern nur anzeigen, ob sie verarbeitet werden
includeDotFolders: false, // Punktordner in die Dateisuche einbeziehen
noSourceMaps: false, // Die Generierung von Source Maps verhindern
noMinify: false, // Die Minimierung des ausgegebenen CSS deaktivieren
noRecursion: false, // Die rekursive Dateisuche deaktivieren
relativeOutput: false, // Ausgabedateien relativ zu jeder Quelldatei anstatt zum Eingabestammverzeichnis ausgeben
copy: false, // Kompiliertes CSS in die Zwischenablage kopieren, anstatt in eine Datei zu schreiben, wenn nur eine Datei verarbeitet wird
quietMode: false, // Alle Protokollmeldungen außer Fehlern unterdrücken
ignores: '', // Dateien/Verzeichnisse, die von der Minimierung ausgeschlossen werden sollen
comment: '' // Kopfzeilenkommentar, der dem minimierten Code vorangestellt wird
}
```
💡 Führen Sie `scss-to-css init` aus, um eine Vorlage für die `scss-to-css.config.mjs` in Ihrem Projektstammverzeichnis zu erstellen.
## 🔌 API-Nutzung
Sie können auch **scss-to-css** in Ihre App importieren, um deren API-Methoden zu verwenden, sowohl als ECMAScript-Modul als auch als CommonJS-Modul.
#### ECMAScript*:
```js
import scssToCSS from '@adamlui/scss-to-css'
```
#### CJS:
```js
const scssToCSS = require('@adamlui/scss-to-css')
```
###### _*Node.js Version 14 oder höher erforderlich_
#
### `compile(eingang[, optionen])`
💡 Kompiliert SCSS basierend auf der bereitgestellten Zeichenfolgeneingabe.
Wenn **Quellcode** übergeben wird, wird dieser direkt kompiliert, dann wird ein Objekt zurückgegeben, das `srcPath` + `code` + `srcMap` + `error` enthält:
```js
const quellcode = 'h1 { font-size: 40px ; code { font-face: Roboto Mono }}',
kompEbnis = scssToCSS.compile(quellcode)
console.log(kompEbnis.error) // gibt einen Laufzeitfehler oder `undefined` aus, wenn kein Fehler vorliegt
console.log(kompEbnis.code) // gibt minimiertes CSS aus: 'h1{font-size:40px}h1 code{font-face:Roboto Mono}'
```
Wenn ein **Dateipfad** übergeben wird, wird der Code der Datei geladen und dann in CSS kompiliert, wodurch ein Objekt wie oben zurückgegeben wird.
Wenn ein **Verzeichnispfad** übergeben wird, wird nach SCSS-Dateien gesucht (standardmäßig rekursiv), der Code jeder Datei wird geladen und dann kompiliert, dann wird ein Array von Objekten zurückgegeben, die `srcPath` + `code` + `srcMap` + `error` enthalten:
```js
// Gibt Pfade zu SCSS-Dateien im Arbeitsverzeichnis + allen verschachtelten Verzeichnissen aus
const kompEbnisse = scssToCSS.compile('.')
kompEbnisse.forEach(ergebnis => console.log(ergebnis.srcPath))
// Gibt kompiliertes CSS aus der zweiten SCSS-Datei aus, wenn es gefunden wird, oder `undefined`, wenn es nicht gefunden wird
console.log(kompEbnisse[1].code)
```
Optionen sind boolesche Werte und werden als Objekteigenschaften übergeben. Zum Beispiel:
```js
// Gibt ein Array von Datenobjekten zurück, wobei `.code` nicht minimiertes CSS enthält
scssToCSS.compile(eingangVer, { minify: false })
```
Verfügbare Parameter (und ihre Standardeinstellungen) sind:
Name | Typ | Beschreibung | Standardwert
-----------------|-----------------|----------------------------------------------------------------------------------------------|--------------
`recursive` | Boolescher Wert | Rekursive Suche nach verschachtelten Dateien, wenn der Verzeichnispfad übergeben wird. | `true`
`verbose` | Boolescher Wert | Anmeldung in Konsole/Terminal anzeigen. | `true`
`dotFolders` | Boolescher Wert | Beziehen Sie Punktordner in die Dateisuche ein. | `false`
`minify` | Boolescher Wert | Ausgabe-CSS minimieren. | `true`
`sourceMaps` | Boolescher Wert | Generieren Sie CSS-Quellkarten. | `true`
`relativeOutput` | Boolescher Wert | Ausgabedateien werden relativ zu jeder Quelldatei anstatt zum Eingabeverzeichnis erstellt. | `false`
`ignores` | Array | Dateien/Verzeichnisse, die von der Kompilierung ausgeschlossen werden sollen. | `[]`
`comment` | Zeichenfolge | Header-Kommentar, der dem kompilierten CSS vorangestellt wird. Mit '\n' zeilenweise trennen. | `''`
#
### `findSCSS(suchverzeichnis[, optionen])`
💡 Sucht nach allen SCSS-Dateien innerhalb der übergebenen Zeichenfolge `suchverzeichnis` (nützlich, um herauszufinden, welche Dateien [`compile()`](#compileeingang-optionen) verarbeiten wird) und gibt ein Array mit ihren Dateipfaden zurück.
Optionen sind boolesche Werte und werden als Objekteigenschaften übergeben. Zum Beispiel:
```js
// Suche nach SCSS-Dateien genau in assets/scss
const suchergEbnisse = scssToCSS.findSCSS('assets/scss', { recursive: false })
console.log(suchergEbnisse)
/* beispielausgabe:
findSCSS() » Searching for SCSS files...
findSCSS() » Search complete! 2 files found.
findSCSS() » Check returned array.
[
'E:\\js\\utils\\scss-to-css\assets\\scss\\foo.scss',
'E:\\js\\utils\\scss-to-css\assets\\scss\\bar.sass'
]
*/
```
Verfügbare Parameter (und ihre Standardeinstellungen) sind:
Name | Typ | Beschreibung | Standardwert
--------------|-----------------|----------------------------------------------------------------------------------|--------------
`recursive` | Boolescher Wert | Rekursive Suche nach verschachtelten Dateien im übergebenen suchverzeichnis. | `true`
`verbose` | Boolescher Wert | Anmeldung in Konsole/Terminal anzeigen. | `true`
`dotFolders` | Boolescher Wert | Beziehen Sie Punktordner in die Dateisuche ein. | `false`
`ignores` | Array | Dateien/Verzeichnisse, die von den Suchergebnissen ausgeschlossen werden sollen. | `[]`
## 🏛️ MIT-Lizenz
**Urheberrechte © 2024 [Adam Lui](https://github.com/adamlui) und Mitwirkende**
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN ZUSAMMENHANG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
## 🛠️ Verwandte Dienstprogramme
### [ minify.js](https://github.com/adamlui/minify.js/#readme) 
> Alle JavaScript-Dateien rekursiv verkleinern.
[Installieren](https://github.com/adamlui/minify.js/tree/main/node.js/docs/de/#-installation) /
[CLI-Nutzung](https://github.com/adamlui/minify.js/tree/main/node.js/docs/de/#-verwendung-der-befehlszeile) /
[API-Nutzung](https://github.com/adamlui/minify.js/tree/main/node.js/docs/de/#-api-nutzung) /
[Liesmich](https://github.com/adamlui/minify.js/tree/main/node.js/docs/de/#readme) /
[Diskutieren](https://github.com/adamlui/minify.js/discussions)
**Weitere JavaScript-Dienstprogramme** /
Diskutieren /
Fehler melden /
Schwachstelle melden /
Zurück nach oben ↑
