Wie kompiliere oder konvertiere ich sass / scss mit node-sass (kein Ruby) in css?

88

Ich hatte Probleme mit der Einrichtung von libsass, da es nicht so einfach war wie der Ruby-basierte Transpiler. Könnte jemand erklären, wie man:

  1. libsass installieren?
  2. Verwenden Sie es über die Befehlszeile?
  3. Verwenden Sie es mit Task-Läufern wie Schlucken und Grunzen?

Ich habe wenig Erfahrung mit Paketmanagern und noch weniger mit Task-Läufern.

css sass gulp-sass node-sass libsass Thoran
quelle

Antworten:

223

Ich habe den Node-Sass-Implementierer für libsass ausgewählt, weil er auf node.js basiert.

Node-Sass installieren

  • (Voraussetzung) Wenn Sie kein npm haben, installieren Sie zuerst Node.js.
  • $ npm install -g node-sassInstalliert Node-Sass global -g.

Dies wird hoffentlich alles installieren, was Sie brauchen, wenn nicht libsass unten lesen.

Verwendung von Node-Sass über Befehlszeilen- und npm-Skripte

Allgemeines Format:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

Beispiele:

  1. $ node-sass my-styles.scss my-styles.css Kompiliert eine einzelne Datei manuell.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ Kompiliert alle Dateien in einem Ordner manuell.
  3. $ node-sass -w sass/ -o css/Kompiliert alle Dateien in einem Ordner automatisch, wenn die Quelldatei (en) geändert werden. -wFügt eine Überwachung für Änderungen an den Dateien hinzu.

Weitere nützliche Optionen wie 'Komprimierung' @ hier . Die Befehlszeile ist gut für eine schnelle Lösung. Sie können jedoch Task-Runner wie Grunt.js oder Gulp.js verwenden, um den Erstellungsprozess zu automatisieren.

Sie können die obigen Beispiele auch zu npm-Skripten hinzufügen. Um npm-Skripte als Alternative zu gulp richtig zu verwenden , lesen Sie diesen umfassenden Artikel @ css-tricks.com, insbesondere über Gruppierungsaufgaben .

  • Wenn sich package.jsonin Ihrem Projektverzeichnis keine Datei befindet, wird eine Datei $ npm initerstellt. Verwenden Sie es mit -y, um die Fragen zu überspringen.
  • In "sass": "node-sass -w sass/ -o css/"zu scriptsin - package.jsonDatei. Es sollte ungefähr so ​​aussehen:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass wird Ihre Dateien kompilieren.

Wie mit Schluck zu verwenden

  • $ npm install -g gulp installiert Gulp global.
  • Wenn sich package.jsonin Ihrem Projektverzeichnis keine Datei befindet, wird eine Datei $ npm initerstellt. Verwenden Sie es mit -y, um die Fragen zu überspringen.
  • $ npm install --save-dev gulpinstalliert Gulp lokal. --save-devfügt gulpzu devDependenciesin package.json.
  • $ npm install gulp-sass --save-dev installiert gulp-sass lokal.
  • Richten Sie gulp für Ihr Projekt ein, indem Sie eine gulpfile.jsDatei in Ihrem Projektstammordner mit folgendem Inhalt erstellen :
'use strict';
var gulp = require('gulp');

Ein einfaches Beispiel zum Transpilen

Fügen Sie diesen Code Ihrer gulpfile.js hinzu:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sassführt die obige Aufgabe aus, die .scss-Datei (en) im sassOrdner kompiliert und .css-Datei (en) im Ordner generiert css.

Um das Leben einfacher zu machen, fügen wir eine Uhr hinzu, damit wir sie nicht manuell kompilieren müssen. Fügen Sie diesen Code hinzu zu gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Alles ist jetzt eingestellt! Führen Sie einfach die Überwachungsaufgabe aus:

$ gulp sass:watch

Verwendung mit Node.js.

Wie der Name von node-sass andeutet, können Sie Ihre eigenen node.js-Skripte zum Transpilieren schreiben. Wenn Sie neugierig sind, lesen Sie die Node-Sass-Projektseite.

Was ist mit libsass?

Libsass ist eine Bibliothek, die von einem Implementierer wie sassC oder in unserem Fall node-sass erstellt werden muss. Node-sass enthält eine erstellte Version von libsass, die standardmäßig verwendet wird. Wenn die Build-Datei auf Ihrem Computer nicht funktioniert, wird versucht, libsass für Ihren Computer zu erstellen. Dieser Prozess erfordert Python 2.7.x (3.x funktioniert ab heute nicht mehr). Zusätzlich:

LibSass erfordert GCC 4.6+ oder Clang / LLVM. Wenn Ihr Betriebssystem älter ist, wird diese Version möglicherweise nicht kompiliert. Unter Windows benötigen Sie MinGW mit GCC 4.6+ oder VS 2013 Update 4+. Es ist auch möglich, LibSass mit Clang / LLVM unter Windows zu erstellen.

Thoran
quelle
1
@ PublicHandle Vielleicht war das der Grund, ich erinnere mich nicht. node-sassist in gulp-sassden Abhängigkeiten , so dass es nicht lokal installiert werden muss.
Thoran
1
Die globale Installation von @publicHandle von gulp ist erforderlich, wenn Sie gulp-Aufgaben über die Befehlszeile ausführen möchten.
Thoran
1
@Thoran Ah, das ist dann sinnvoll, wenn Node-Sass eine Abhängigkeit von Gulp-Sass ist, so dass es lokal nicht benötigt wird, während Gulp selbst an beiden Stellen benötigt wird, damit es in der Befehlszeile ausgeführt und als Abhängigkeit in das Projekt aufgenommen werden kann. Nochmals vielen Dank, tolle Zusammenfassung!
PublicHandle
1
@Thoran Ich habe versucht herauszufinden, ob ich es vermeiden kann, einen Task-Runner wie gulp oder grunt zu verwenden, und ein einfaches npm-Skript zu schreiben, das genau das tut, was ich brauche. Ich habe in Node-Sass geschaut, die Kommandozeile verwendet offensichtlich Glob und Schleifen über die Dateien. Ich denke, es ist am besten, diesen Code einfach zu kopieren.
Bernhard Döbler
1
Um die Verwendung von Ruby zu vermeiden , kann man node.js verwenden , eine bestimmte Version von Python UND eine C ++ - Bibliothek, die unter Windows kompiliert werden muss. Das vereinfacht die Dinge sehr.
toniedzwiedz
5

Die Installation dieser Tools kann unter verschiedenen Betriebssystemen variieren.

Unter Windows unterstützt Node-Sass derzeit standardmäßig VS2015. Wenn Sie nur VS2013 in Ihrer Box haben und beim Ausführen des Befehls auf einen Fehler stoßen, können Sie die Version von VS definieren, indem Sie Folgendes hinzufügen: --msvs_version = 2013. Dies ist auf der Seite node-sass npm vermerkt .

Die sichere Befehlszeile, die unter Windows mit VS2013 funktioniert, lautet also: npm install --msvs_version = 2013 gulp node-sass gulp-sass

Brian Ng
quelle
3

In Windows 10 mit Node v6.11.2 und npm v3.10.10 , um direkt in einem beliebigen Ordner ausgeführt zu werden:

> node-sass [options] <input.scss> [output.css]

Ich habe nur die Anweisungen in Node-Sass Github befolgt :

  1. Fügen Sie Node-Gyp-Voraussetzungen hinzu, indem Sie als Admin in einer Powershell ausgeführt werden (es dauert eine Weile):

    > npm install --global --production windows-build-tools

  2. Führen Sie in einer normalen Befehlszeilen- Shell ( Win+ R+ cmd + Enter) Folgendes aus:

    > npm install -g node-gyp
> npm install -g node-sass

    Die -gplatziert diese Pakete unter %userprofile%\AppData\Roaming\npm\node_modules. Sie können überprüfen, ob es npm\node_modules\node-sass\bin\node-sassjetzt existiert.

  3. Überprüfen Sie, ob die Umgebungsvariable Ihres lokalen Kontos (nicht des Systems)PATH Folgendes enthält:

    %userprofile%\AppData\Roaming\npm

    Wenn dieser Pfad nicht vorhanden ist, werden npm und node möglicherweise noch ausgeführt, die Modul- Bin- Dateien jedoch nicht!

Schließen Sie die vorherige Shell, öffnen Sie eine neue und führen Sie entweder > node-gypoder aus > node-sass.

Hinweis:

  • Das ist windows-build-tools möglicherweise nicht erforderlich (wenn keine Kompilierung durchgeführt wird? Ich würde gerne lesen, ob jemand es ohne Installation dieser Tools erstellt hat), aber es hat dem Administratorkonto die GYP_MSVS_VERSIONUmgebungsvariable mit hinzugefügt2015 einem Wert .
  • Ich kann auch andere Module mit bin- Dateien wie > uglifyjs main.js main.min.jsund direkt ausführen> mocha
Armfuß
quelle