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-sass
Installiert 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:
$ node-sass my-styles.scss my-styles.css
Kompiliert eine einzelne Datei manuell.
$ node-sass my-sass-folder/ -o my-css-folder/
Kompiliert alle Dateien in einem Ordner manuell.
$ node-sass -w sass/ -o css/
Kompiliert alle Dateien in einem Ordner automatisch, wenn die Quelldatei (en) geändert werden. -w
Fü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.json
in Ihrem Projektverzeichnis keine Datei befindet, wird eine Datei $ npm init
erstellt. Verwenden Sie es mit -y
, um die Fragen zu überspringen.
- In
"sass": "node-sass -w sass/ -o css/"
zu scripts
in - package.json
Datei. 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.json
in Ihrem Projektverzeichnis keine Datei befindet, wird eine Datei $ npm init
erstellt. Verwenden Sie es mit -y
, um die Fragen zu überspringen.
$ npm install --save-dev gulp
installiert Gulp lokal. --save-dev
fügt gulp
zu devDependencies
in package.json
.
$ npm install gulp-sass --save-dev
installiert gulp-sass lokal.
- Richten Sie gulp für Ihr Projekt ein, indem Sie eine
gulpfile.js
Datei 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 sass
führt die obige Aufgabe aus, die .scss-Datei (en) im sass
Ordner 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.
node-sass
ist ingulp-sass
den Abhängigkeiten , so dass es nicht lokal installiert werden muss.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
quelle
In Windows 10 mit Node v6.11.2 und npm v3.10.10 , um direkt in einem beliebigen Ordner ausgeführt zu werden:
Ich habe nur die Anweisungen in Node-Sass Github befolgt :
Fügen Sie Node-Gyp-Voraussetzungen hinzu, indem Sie als Admin in einer Powershell ausgeführt werden (es dauert eine Weile):
Führen Sie in einer normalen Befehlszeilen- Shell ( Win+ R+ cmd + Enter) Folgendes aus:
Die
-g
platziert diese Pakete unter%userprofile%\AppData\Roaming\npm\node_modules
. Sie können überprüfen, ob esnpm\node_modules\node-sass\bin\node-sass
jetzt existiert.Überprüfen Sie, ob die Umgebungsvariable Ihres lokalen Kontos (nicht des Systems)
PATH
Folgendes enthält: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-gyp
oder aus> node-sass
.Hinweis:
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 dieGYP_MSVS_VERSION
Umgebungsvariable mit hinzugefügt2015
einem Wert .> uglifyjs main.js main.min.js
und direkt ausführen> mocha
quelle