Jak skompilować lub przekonwertować sass / scss do css z node-sass (bez Ruby)?

Miałem problemy z konfiguracją libsass, ponieważ nie było to tak proste, jak transpiler oparty na Ruby. Czy ktoś mógłby wyjaśnić, jak:

1. zainstalować libsass?
2. używać go z linii poleceń?
3. używać go do biegaczy zadań, takich jak łyk i chrząknięcie?

Mam niewielkie doświadczenie z menedżerami pakietów, a jeszcze mniejsze z programami do uruchamiania zadań.

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

1. $ node-sass my-styles.scss my-styles.css ręcznie kompiluje pojedynczy plik.
2. $ node-sass my-sass-folder/ -o my-css-folder/ ręcznie kompiluje wszystkie pliki w folderze.
3. $ node-sass -w sass/ -o css/automatycznie kompiluje wszystkie pliki w folderze, gdy tylko pliki źródłowe są modyfikowane. -wdodaje 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.jsonw katalogu projektu nie ma żadnego pliku, uruchomienie $ npm initgo utworzy. Użyj go z, -yaby pominąć pytania.
• Dodaj "sass": "node-sass -w sass/ -o css/"do scriptsw package.jsonpliku. 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.jsonw katalogu projektu nie ma żadnego pliku, uruchomienie $ npm initgo utworzy. Użyj go z, -yaby pominąć pytania.
• $ npm install --save-dev gulpinstaluje Gulp lokalnie. --save-devdodaje gulpsię devDependenciesw package.json.
• $ npm install gulp-sass --save-dev instaluje lokalnie gulp-sass.
• Skonfiguruj gulp dla swojego projektu, tworząc gulpfile.jsplik 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 sassuruchamia powyższe zadanie, które kompiluje plik (i) .scss w sassfolderze i generuje plik (i) .css w cssfolderze.

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.

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

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 :

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

2. W zwykłej powłoce wiersza poleceń ( Win+ R+ cmd + Enter) uruchom:

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

   -gUmieszcza te pakiety poniżej %userprofile%\AppData\Roaming\npm\node_modules. Możesz sprawdzić, czy npm\node_modules\node-sass\bin\node-sassteraz istnieje.

3. 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-gyplub > 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 w GYP_MSVS_VERSIONzmiennej środowiskowej z 2015jako wartość.
• Jestem również w stanie uruchomić bezpośrednio inne moduły z plikami bin , takie jak > uglifyjs main.js main.min.jsi> mocha