Bagaimana cara mengkompilasi atau mengkonversi sass / scss ke css dengan node-sass (tanpa Ruby)?

91

Saya kesulitan mengatur libsass karena tidak semudah transpiler berbasis Ruby. Bisakah seseorang menjelaskan cara:

  1. instal libsass?
  2. menggunakannya dari baris perintah?
  3. menggunakannya dengan pelari tugas seperti menelan dan mendengus?

Saya memiliki sedikit pengalaman dengan manajer paket dan bahkan kurang dengan pelari tugas.

css sass gulp-sass node-sass libsass Thoran
sumber

Jawaban:

226

Saya memilih implementer node-sass untuk libsass karena didasarkan pada node.js.

Menginstal node-sass

  • (Prasyarat) Jika Anda tidak memiliki npm, instal Node.js terlebih dahulu.
  • $ npm install -g node-sassmenginstal node-sass secara global -g.

Mudah-mudahan ini akan menginstal semua yang Anda butuhkan, jika tidak membaca libsass di bagian bawah.

Cara menggunakan node-sass dari Command line dan skrip npm

Format umum:

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

Contoh:

  1. $ node-sass my-styles.scss my-styles.css mengkompilasi satu file secara manual.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ mengkompilasi semua file dalam folder secara manual.
  3. $ node-sass -w sass/ -o css/mengkompilasi semua file dalam folder secara otomatis setiap kali file sumber diubah. -wmenambahkan arloji untuk perubahan pada file (s).

Opsi yang lebih berguna seperti 'kompresi' @ di sini . Baris perintah bagus untuk solusi cepat, namun, Anda dapat menggunakan pelari tugas seperti Grunt.js atau Gulp.js untuk mengotomatiskan proses pembuatan.

Anda juga dapat menambahkan contoh di atas ke skrip npm. Untuk menggunakan skrip npm dengan benar sebagai alternatif untuk menelan, baca artikel komprehensif ini @ css-tricks.com terutama baca tentang tugas pengelompokan .

  • Jika tidak ada package.jsonfile dalam direktori proyek Anda yang sedang berjalan $ npm initakan membuatnya. Gunakan dengan -yuntuk melewati pertanyaan.
  • Tambahkan "sass": "node-sass -w sass/ -o css/"ke scriptsdalam package.jsonfile. Seharusnya terlihat seperti ini:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass akan mengkompilasi file Anda.

Cara menggunakan dengan teguk

  • $ npm install -g gulp menginstal Gulp secara global.
  • Jika tidak ada package.jsonfile dalam direktori proyek Anda yang sedang berjalan $ npm initakan membuatnya. Gunakan dengan -yuntuk melewati pertanyaan.
  • $ npm install --save-dev gulpmenginstal Gulp secara lokal. --save-devmenambahkan gulpke devDependenciesdalam package.json.
  • $ npm install gulp-sass --save-dev menginstal gulp-sass secara lokal.
  • Siapkan gulp untuk proyek Anda dengan membuat gulpfile.jsfile di folder akar proyek Anda dengan konten ini:
'use strict';
var gulp = require('gulp');

Contoh dasar untuk transpile

Tambahkan kode ini ke gulpfile.js Anda:

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 sassmenjalankan tugas di atas yang mengkompilasi file .scss di sassfolder dan menghasilkan file .css di cssfolder.

Untuk membuat hidup lebih mudah, mari tambahkan jam tangan agar tidak perlu mengkompilasinya secara manual. Tambahkan kode ini ke gulpfile.js:

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

Semua sudah diatur sekarang! Jalankan saja tugas jam tangan:

$ gulp sass:watch

Cara menggunakan dengan Node.js

Sesuai dengan namanya node-sass, Anda dapat menulis skrip node.js Anda sendiri untuk transpiling. Jika Anda penasaran, lihat halaman proyek node-sass.

Bagaimana dengan libsass?

Libsass adalah pustaka yang perlu dibangun oleh pelaksana seperti sassC atau dalam kasus kami node-sass. Node-sass berisi versi bawaan dari libsass yang digunakan secara default. Jika file build tidak berfungsi di komputer Anda, ia mencoba membangun libsass untuk mesin Anda. Proses ini membutuhkan Python 2.7.x (3.x tidak berfungsi untuk hari ini). Sebagai tambahan:

LibSass membutuhkan GCC 4.6+ atau Clang / LLVM. Jika OS Anda lebih lama, versi ini mungkin tidak dapat dikompilasi. Di Windows, Anda memerlukan MinGW dengan GCC 4.6+ atau VS 2013 Update 4+. LibSass juga dapat dibangun dengan Clang / LLVM di Windows.

Thoran
sumber
1
@PublicHandle Mungkin itu alasannya, saya tidak ingat. node-sassada dalam gulp-sassdependensi , jadi tidak perlu menginstalnya secara lokal.
Thoran
1
@PublicHandle penginstalan global gulp diperlukan jika Anda ingin menjalankan tugas gulp dari baris perintah.
Thoran
1
@Thoran Ah itu masuk akal jika node-sass adalah dependensi dari gulp-sass jadi tidak diperlukan secara lokal sementara gulp sendiri diperlukan di kedua tempat sehingga dapat dijalankan di command line dan disertakan sebagai dependensi dalam project. Sekali lagi terima kasih, tulisan yang luar biasa!
PublicHandle
1
@ Thoran Saya mencoba mencari tahu apakah saya dapat menghindari penggunaan pelari tugas seperti gulp atau grunt dan menulis skrip npm sederhana yang melakukan apa yang saya butuhkan. Saya melihat ke node-sass, baris perintah jelas menggunakan glob dan loop di atas file. Saya kira yang terbaik adalah menyalin kode itu.
Bernhard Döbler
1
Jadi untuk menghindari penggunaan Ruby , seseorang dapat menggunakan node.js , versi tertentu dari Python DAN pustaka C ++ yang perlu dikompilasi jika menggunakan Windows? Itu sangat menyederhanakan banyak hal.
toniedzwiedz
5

Penginstalan alat ini mungkin berbeda pada OS yang berbeda.

Di bawah Windows, node-sass saat ini mendukung VS2015 secara default, jika Anda hanya memiliki VS2013 di kotak Anda dan menemui kesalahan apapun saat menjalankan perintah, Anda dapat menentukan versi VS dengan menambahkan: --msvs_version = 2013. Ini dicatat pada halaman node-sass npm .

Jadi, baris perintah aman yang berfungsi di Windows dengan VS2013 adalah: npm install --msvs_version = 2013 gulp node-sass gulp-sass

Brian Ng
sumber
3

Di Windows 10 menggunakan node v6.11.2 dan npm v3.10.10 , untuk mengeksekusi langsung di folder mana pun:

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

Saya hanya mengikuti instruksi di node-sass Github :

  1. Tambahkan prasyarat node-gyp dengan menjalankan sebagai Admin di Powershell (perlu beberapa saat):

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

  2. Dalam shell baris perintah normal ( Win+ R+ cmd + Enter), jalankan:

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

    Tempat -gpaket ini berada di bawah %userprofile%\AppData\Roaming\npm\node_modules. Anda dapat memeriksa bahwa npm\node_modules\node-sass\bin\node-sasssekarang ada.

  3. Periksa apakah variabel lingkungan akun lokal Anda (bukan Sistem)PATH berisi:

    %userprofile%\AppData\Roaming\npm

    Jika jalur ini tidak ada, npm dan node mungkin masih berjalan, tetapi file modul bin tidak!

Tutup shell sebelumnya dan buka kembali yang baru dan jalankan salah satu > node-gypatau > node-sass.

catatan:

  • Ini windows-build-tools mungkin tidak diperlukan (jika tidak ada kompilasi yang dilakukan? Saya ingin membaca jika seseorang membuatnya tanpa menginstal alat ini), tetapi menambahkan GYP_MSVS_VERSIONvariabel lingkungan ke akun admin 2015sebagai nilai.
  • Saya juga dapat menjalankan modul lain secara langsung dengan file bin , seperti > uglifyjs main.js main.min.jsdan> mocha
Kaki tangan
sumber