Wybrałem implementator node-sass dla libsass, ponieważ jest oparty na node.js.
Instalowanie node-sass
- (Wymaganie wstępne) Jeśli nie masz npm, zainstaluj najpierw Node.js.
$ npm install -g node-sass
instaluje node-sass globalnie -g
.
Mam nadzieję, że to zainstaluje wszystko, czego potrzebujesz, jeśli nie przeczytasz libsass na dole.
Jak używać node-sass z wiersza poleceń i skryptów npm
Ogólny format:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Przykłady:
$ node-sass my-styles.scss my-styles.css
ręcznie kompiluje pojedynczy plik.
$ node-sass my-sass-folder/ -o my-css-folder/
ręcznie kompiluje wszystkie pliki w folderze.
$ node-sass -w sass/ -o css/
automatycznie kompiluje wszystkie pliki w folderze, gdy tylko pliki źródłowe są modyfikowane. -w
dodaje obserwację zmian w pliku (plikach).
Więcej przydatnych opcji, takich jak „kompresja” @ tutaj . Linia poleceń jest dobra do szybkiego rozwiązania, jednak możesz użyć programów uruchamiających zadania, takich jak Grunt.js lub Gulp.js, aby zautomatyzować proces kompilacji.
Możesz również dodać powyższe przykłady do skryptów npm. Aby prawidłowo używać skryptów npm jako alternatywy dla gulp, przeczytaj ten obszerny artykuł @ css-tricks.com, w szczególności przeczytaj o grupowaniu zadań .
- Jeśli
package.json
w katalogu projektu nie ma żadnego pliku, uruchomienie $ npm init
go utworzy. Użyj go z, -y
aby pominąć pytania.
- Dodaj
"sass": "node-sass -w sass/ -o css/"
do scripts
w package.json
pliku. Powinien wyglądać mniej więcej tak:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass
skompiluje twoje pliki.
Jak używać z łykiem
$ npm install -g gulp
instaluje Gulp na całym świecie.
- Jeśli
package.json
w katalogu projektu nie ma żadnego pliku, uruchomienie $ npm init
go utworzy. Użyj go z, -y
aby pominąć pytania.
$ npm install --save-dev gulp
instaluje Gulp lokalnie. --save-dev
dodaje gulp
się devDependencies
w package.json
.
$ npm install gulp-sass --save-dev
instaluje lokalnie gulp-sass.
- Skonfiguruj gulp dla swojego projektu, tworząc
gulpfile.js
plik w folderze głównym projektu z następującą zawartością:
'use strict';
var gulp = require('gulp');
Podstawowy przykład transpile
Dodaj ten kod do swojego pliku gulpfile.js:
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
uruchamia powyższe zadanie, które kompiluje plik (i) .scss w sass
folderze i generuje plik (i) .css w css
folderze.
Aby ułatwić życie, dodajmy zegarek, abyśmy nie musieli go ręcznie kompilować. Dodaj ten kod do gulpfile.js
:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Wszystko gotowe! Po prostu uruchom zadanie zegarka:
$ gulp sass:watch
Jak korzystać z Node.js.
Jak sugeruje nazwa node-sass, możesz napisać własne skrypty node.js do transpilacji. Jeśli jesteś ciekawy, sprawdź stronę projektu node-sass.
A co z libsass?
Libsass to biblioteka, która musi zostać zbudowana przez implementującego, takiego jak sassC lub w naszym przypadku node-sass. Node-sass zawiera wbudowaną wersję libsass, której używa domyślnie. Jeśli plik kompilacji nie działa na twoim komputerze, próbuje zbudować libsass dla twojego komputera. Ten proces wymaga Pythona 2.7.x (3.x nie działa na dzień dzisiejszy). Dodatkowo:
LibSass wymaga GCC 4.6+ lub Clang / LLVM. Jeśli Twój system operacyjny jest starszy, ta wersja może się nie skompilować. W systemie Windows potrzebujesz MinGW z GCC 4.6+ lub VS 2013 Update 4+. Możliwe jest również zbudowanie LibSass z Clang / LLVM w systemie Windows.
node-sass
jest wgulp-sass
zależnościach użytkownika , więc nie ma potrzeby instalowania go lokalnie.Instalacja tych narzędzi może się różnić w zależności od systemu operacyjnego.
W systemie Windows node-sass obecnie domyślnie obsługuje VS2015, jeśli masz tylko VS2013 w swoim pudełku i napotkasz błąd podczas uruchamiania polecenia, możesz zdefiniować wersję VS, dodając: --msvs_version = 2013. Jest to odnotowane na stronie node-sass npm .
Tak więc bezpieczny wiersz poleceń działający w systemie Windows z VS2013 to: npm install --msvs_version = 2013 gulp node-sass gulp-sass
źródło
W systemie Windows 10 przy użyciu Node v6.11.2 i npm v3.10.10 , aby wykonać bezpośrednio w dowolnym folderze:
> node-sass [options] <input.scss> [output.css]
Postępowałem zgodnie z instrukcjami w node-sass Github :
Dodaj wymagania wstępne dotyczące węzła-gyp , uruchamiając jako administrator w programie PowerShell (zajmuje to chwilę):
> npm install --global --production windows-build-tools
W zwykłej powłoce wiersza poleceń ( Win+ R+ cmd + Enter) uruchom:
> npm install -g node-gyp > npm install -g node-sass
-g
Umieszcza te pakiety poniżej%userprofile%\AppData\Roaming\npm\node_modules
. Możesz sprawdzić, czynpm\node_modules\node-sass\bin\node-sass
teraz istnieje.Sprawdź, czy twoje konto lokalne (nie
PATH
zmienna środowiskowa System) zawiera:%userprofile%\AppData\Roaming\npm
Jeśli ta ścieżka nie istnieje, npm i node mogą nadal działać, ale pliki bin modułów nie!
Zamknij poprzednią powłokę i ponownie otwórz nową i uruchom albo
> node-gyp
lub> node-sass
.Uwaga:
windows-build-tools
Może nie być konieczne (jeśli nie kompilacja odbywa? Chciałbym przeczytać jeśli ktoś się go bez instalowania tych narzędzi), ale zostały dodane do konta administratora wGYP_MSVS_VERSION
zmiennej środowiskowej z2015
jako wartość.> uglifyjs main.js main.min.js
i> mocha
źródło