Jak skompilować lub przekonwertować Sass / scss do css za pomocą node-sass (bez Ruby)?

Wybrałem implementer node-sass dla libsass, ponieważ jest on oparty na node.js.

Instalowanie node-sass

• (warunek) jeśli nie masz npm, zainstaluj Node.js pierwszy.
• $ npm install -g node-sass instaluje node-sass globalnie -g.

To, miejmy nadzieję, zainstaluje wszystko, czego potrzebujesz, jeśli nie odczytasz libsass na dole.

Jak używać node-sass z linii poleceń i skryptów npm

Ogólne 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 kompiluje pojedynczy plik ręcznie.
2. $ node-sass my-sass-folder/ -o my-css-folder/ kompiluje wszystkie pliki w folderze ręcznie.
3. $ node-sass -w sass/ -o css/ kompiluje wszystkie pliki w folderze automatycznie za każdym razem, gdy pliki źródłowe są modyfikowane. -w dodaje zegarek dla zmian w pliku (- ACH).

Więcej użytecznych opcji, takich jak 'kompresja' @ here . Wiersz poleceń jest dobry do szybkiego rozwiązania, jednak można użyć runnerów zadań, takich jak Grunt.js lub Łyk.js do automatyzacji procesu budowania.

Możesz również dodać powyższe przykłady do skryptów npm. Aby poprawnie używać skryptów npm jako alternatywy dla gulp przeczytaj ten obszerny artykuł @ css-tricks.com szczególnie poczytaj o grupowaniu zadań .

• jeśli w katalogu projektu nie ma pliku package.json, który działa $ npm init, utworzy go. Użyj go z -y, aby pominąć pytania.
• dodaj "sass": "node-sass -w sass/ -o css/" do scripts W package.json pliku. Powinno wyglądać coś takiego:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass skompiluje Twoje pliki.

Jak używać z gulp

• $ npm install -g gulp instaluje Gulp globalnie.
• jeśli w katalogu projektu nie ma pliku package.json, który działa $ npm init, utworzy go. Użyj go z -y, aby pominąć pytania.
• $ npm install --save-dev gulp instaluje Gulp lokalnie. --save-dev dodaje gulp do devDependencies W package.json.
• $ npm install gulp-sass --save-dev instaluje gulp-sass lokalnie.
• Konfiguracja gulp dla Twojego projektu przez tworzenie pliku gulpfile.js w folderze głównym projektu o tej zawartości:

'use strict';
var gulp = require('gulp');

Podstawowe przykłady do transpile

Dodaj ten kod do 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ów scss w folderze sass i generuje .pliki css w folderze css.

Aby ułatwić życie, dodajmy zegarek, abyśmy nie musieli go kompilować ręcznie. Dodaj ten kod do swojego gulpfile.js:

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

Wszystko gotowe! Just run zadanie czuwania:

$ gulp sass:watch

Jak używać z Node.js

Jak sugeruje nazwa node-sass, możesz napisać swój własny węzeł.Skrypty js do transpilingu. Jeśli jesteś ciekawy, sprawdź stronę projektu node-sass.

Libsass jest biblioteką, która musi być zbudowana przez implementatora, 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 zbuduj libsass dla swojej maszyny. Ten proces wymaga Pythona 2.7.x (3 .x nie działa od dziś). Dodatkowo:

LibSass wymaga GCC 4.6+ lub Clang / LLVM. Jeśli System Operacyjny jest starszy, ta wersja może nie być skompilowana. W systemie Windows potrzebujesz MinGW z GCC 4.6 + lub VS 2013 Update 4+. Możliwe jest również zbudowanie LibSass z Clang / LLVM na Windows.