Sass / scss'i node-sass (Ruby yok) ile css'ye nasıl derleyebilir veya dönüştürebilirim?

Ruby tabanlı transpiler kadar basit olmadığı için libsass kurmakla uğraşıyordum. Birisi nasıl yapılacağını açıklayabilir mi:

1. libsass yüklensin mi?
2. komut satırından kullanmak?
3. yudum ve homurtu gibi görev koşucuları ile kullanmak?

Paket yöneticileriyle çok az deneyimim var ve hatta görev yöneticileriyle daha az deneyimim var.

Node.js'ye dayandığından libsass için node-sass uygulayıcısını seçtim.

Node-sass kurulumu

• Eğer UÖM'sini yoksa (Önkoşul) yüklemek node.js ilk.
• $ npm install -g node-sassgenel olarak düğüm sass yükler -g.

Bu, en alttaki libsass'ı okumadıysanız, ihtiyacınız olan her şeyi yükleyecektir.

Komut satırı ve npm betiklerinden node-sass nasıl kullanılır

Genel format:

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

Örnekler:

1. $ node-sass my-styles.scss my-styles.css tek bir dosyayı manuel olarak derler.
2. $ node-sass my-sass-folder/ -o my-css-folder/ bir klasördeki tüm dosyaları manuel olarak derler.
3. $ node-sass -w sass/ -o css/kaynak dosya (lar) her değiştirildiğinde bir klasördeki tüm dosyaları otomatik olarak derler. -wdosya (lar) daki değişiklikler için bir izleme ekler.

Burada 'sıkıştırma' gibi daha fazla yararlı seçenek @ . Komut satırı hızlı bir çözüm için iyidir, ancak oluşturma sürecini otomatikleştirmek için Grunt.js veya Gulp.js gibi görev çalıştırıcıları kullanabilirsiniz.

Yukarıdaki örnekleri npm betiklerine de ekleyebilirsiniz. Düzgün bir şekilde npm komut dosyalarını kullanmak için yudum alternatif okumak bu kapsamlı makale @ css-tricks.com özellikle hakkında okumak görevleri gruplama .

• Yoksa hiçbir package.jsonproje dizin çalışan dosya $ npm initbir tanesini oluşturur. -ySoruları atlamak için kullanın .
• Ekle "sass": "node-sass -w sass/ -o css/"için scriptsde package.jsondosyaya. Bunun gibi bir şeye benzemeli:

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

• $ npm run sass dosyalarınızı derleyecektir.

Yudumla nasıl kullanılır

• $ npm install -g gulp Gulp'u global olarak yükler.
• Yoksa hiçbir package.jsonproje dizin çalışan dosya $ npm initbir tanesini oluşturur. -ySoruları atlamak için kullanın .
• $ npm install --save-dev gulpGulp'u yerel olarak yükler. --save-devekler gulpiçin devDependenciesde package.json.
• $ npm install gulp-sass --save-dev gulp-sass'ı yerel olarak yükler.
• gulpfile.jsProje kök klasörünüzde bu içerikle bir dosya oluşturarak projeniz için gulp kurun :

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

Transpile için temel bir örnek

Bu kodu gulpfile.js dosyanıza ekleyin:

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 sasssassklasördeki .scss dosyalarını derleyen ve klasörde .css dosyalarını oluşturan yukarıdaki görevi çalıştırır css.

Hayatı kolaylaştırmak için bir saat ekleyelim, böylece onu manuel olarak derlemek zorunda kalmayalım. Bu kodu şuraya ekleyin gulpfile.js:

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

Her şey şimdi ayarlandı! Sadece izle görevini çalıştırın:

$ gulp sass:watch

Node.js ile nasıl kullanılır?

Node-sass adından da anlaşılacağı gibi, transpiling için kendi node.js komut dosyalarınızı yazabilirsiniz. Merak ediyorsanız, node-sass proje sayfasına göz atın.

Ya libsass?

Libsass, sassC gibi bir uygulayıcı veya bizim durumumuzda node-sass tarafından oluşturulması gereken bir kitaplıktır. Node-sass, varsayılan olarak kullandığı yerleşik bir libsass sürümünü içerir. Yapı dosyası makinenizde çalışmazsa, makineniz için libsass oluşturmaya çalışır. Bu işlem Python 2.7.x gerektirir (3.x bugün itibariyle çalışmamaktadır). Ek olarak:

LibSass, GCC 4.6+ veya Clang / LLVM gerektirir. İşletim sisteminiz daha eskiyse, bu sürüm derlenmeyebilir. Windows'ta GCC 4.6+ veya VS 2013 Update 4+ ile MinGW'ye ihtiyacınız vardır. LibSass'ı Windows üzerinde Clang / LLVM ile kurmak da mümkündür.

Bu araçların kurulumu farklı işletim sistemlerine göre değişebilir.

Windows altında, node-sass şu anda varsayılan olarak VS2015'i desteklemektedir, kutunuzda yalnızca VS2013 varsa ve komutu çalıştırırken herhangi bir hatayla karşılaşırsanız, VS'nin sürümünü şu şekilde tanımlayabilirsiniz: --msvs_version = 2013. Bu, düğüm noktası npm sayfasında belirtilir .

Dolayısıyla, Windows'ta VS2013 ile çalışan güvenli komut satırı şudur: npm install --msvs_version = 2013 gulp node-sass gulp-sass

Doğrudan herhangi bir klasörde yürütmek için düğüm v6.11.2 ve npm v3.10.10 kullanan Windows 10'da :

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

Yalnızca node-sass Github'daki talimatları izledim :

1. Bir Powershell'de Yönetici olarak çalıştırarak düğüm-gyp önkoşullarını ekleyin (biraz zaman alır):

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

2. Bir de , normal komut satırı kabuğu ( Win+ R+ cmd + Enter) çalıştırmak:

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

   -gAltında bu paketleri yerleştirir %userprofile%\AppData\Roaming\npm\node_modules. npm\node_modules\node-sass\bin\node-sassŞimdi var olup olmadığını kontrol edebilirsiniz .

3. Senin olmadığını kontrol edin yerel hesap (değil Sistemi) PATH ortam değişkeni içerir:

   %userprofile%\AppData\Roaming\npm
   

   Bu yol yoksa, npm ve düğüm yine de çalışabilir, ancak modül bin dosyaları çalışmayacaktır!

Önceki kabuğu kapatın ve yenisini yeniden açın ve ya > node-gypda komutunu çalıştırın > node-sass.

Not:

• Gerekli windows-build-tools olmayabilir (derleme yapılmadıysa? Biri bu araçları yüklemeden yapmışsa okumak isterim), ancak yönetici hesabına GYP_MSVS_VERSIONortam değişkenini 2015bir değer olarak ekledi.
• Ayrıca , ve gibi bin dosyalarıyla diğer modülleri doğrudan çalıştırabiliyorum.> uglifyjs main.js main.min.js> mocha