Come compilare o convertire sass / scss in css con node-sass (no Ruby)?

93

Stavo lottando con la configurazione di libsass perché non era così semplice come il transpiler basato su Ruby. Qualcuno potrebbe spiegare come:

  1. installare libsass?
  2. usarlo dalla riga di comando?
  3. usarlo con task runner come gulp e grunt?

Ho poca esperienza con i gestori di pacchetti e ancor meno con i task runner.

css  sass  gulp-sass  node-sass  libsass 
— Thoran
fonte

Risposte:

228

Ho scelto l'implementatore node-sass per libsass perché è basato su node.js.

Installazione di node-sass

  • (Prerequisito) Se non si dispone di npm, installare prima Node.js.
  • $ npm install -g node-sassinstalla node-sass a livello globale -g.

Si spera che questo installerà tutto ciò di cui hai bisogno, se non leggi libsass in fondo.

Come utilizzare node-sass dalla riga di comando e dagli script npm

Formato generale:

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

Esempi:

  1. $ node-sass my-styles.scss my-styles.css compila manualmente un singolo file.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ compila manualmente tutti i file in una cartella.
  3. $ node-sass -w sass/ -o css/compila automaticamente tutti i file in una cartella ogni volta che i file sorgente vengono modificati. -waggiunge un controllo per le modifiche ai file.

Opzioni più utili come "compressione" @ qui . La riga di comando è utile per una soluzione rapida, tuttavia, puoi utilizzare task runner come Grunt.js o Gulp.js per automatizzare il processo di compilazione.

È inoltre possibile aggiungere gli esempi precedenti agli script npm. Per utilizzare correttamente gli script npm come alternativa a gulp, leggi questo articolo completo @ css-tricks.com, in particolare sulle attività di raggruppamento .

  • Se non ci sono package.jsonfile nella directory del progetto in esecuzione $ npm initne creerà uno. Usalo con -yper saltare le domande.
  • Aggiungi "sass": "node-sass -w sass/ -o css/"a scriptsnel package.jsonfile. Dovrebbe assomigliare a qualcosa di simile a questo:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass compilerà i tuoi file.

Come si usa con gulp

  • $ npm install -g gulp installa Gulp a livello globale.
  • Se non ci sono package.jsonfile nella directory del progetto in esecuzione $ npm initne creerà uno. Usalo con -yper saltare le domande.
  • $ npm install --save-dev gulpinstalla Gulp localmente. --save-devsi aggiunge gulpa devDependenciesin package.json.
  • $ npm install gulp-sass --save-dev installa gulp-sass localmente.
  • Imposta gulp per il tuo progetto creando un gulpfile.jsfile nella cartella principale del progetto con questo contenuto:
'use strict';
var gulp = require('gulp');

Un esempio di base per transpile

Aggiungi questo codice al tuo 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 sassesegue l'attività precedente che compila i file .scss nella sasscartella e genera i file .css nella csscartella.

Per semplificarti la vita, aggiungiamo un orologio in modo da non doverlo compilare manualmente. Aggiungi questo codice a gulpfile.js:

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

Adesso è tutto pronto! Esegui semplicemente l'attività di controllo:

$ gulp sass:watch

Come utilizzare con Node.js

Come suggerisce il nome di node-sass, puoi scrivere i tuoi script node.js per il transpiling. Se sei curioso, controlla la pagina del progetto di node-sass.

E libsass?

Libsass è una libreria che deve essere costruita da un implementatore come sassC o nel nostro caso node-sass. Node-sass contiene una versione compilata di libsass che utilizza per impostazione predefinita. Se il file di build non funziona sulla tua macchina, prova a compilare libsass per la tua macchina. Questo processo richiede Python 2.7.x (3.x non funziona da oggi). Inoltre:

LibSass richiede GCC 4.6+ o Clang / LLVM. Se il tuo sistema operativo è precedente, questa versione potrebbe non essere compilabile. Su Windows, è necessario MinGW con GCC 4.6+ o VS 2013 Update 4+. È anche possibile creare LibSass con Clang / LLVM su Windows.

— Thoran
fonte
1
@PublicHandle Forse questo era il motivo, non ricordo. node-sassè nelle gulp-sassdipendenze di , quindi non è necessario installarlo localmente.
— Thoran
1
@PublicHandle L'installazione globale di gulp è necessaria se si desidera eseguire attività di gulp dalla riga di comando.
— Thoran
1
@Thoran Ah questo ha senso quindi se node-sass è una dipendenza di gulp-sass quindi non è necessario localmente mentre lo stesso gulp è necessario in entrambi i posti, quindi può essere eseguito sulla riga di comando ed essere incluso come dipendenza nel progetto. Grazie ancora, fantastico commento!
— PublicHandle
1
@Thoran Stavo cercando di scoprire se posso evitare di usare un task runner come gulp o grunt e scrivere un semplice script npm che fa quello che mi serve. Ho esaminato node-sass, la riga di comando ovviamente usa glob e loop sui file. Immagino sia meglio copiare semplicemente quel codice.
— Bernhard Döbler
1
Quindi, per evitare di usare Ruby , si può usare node.js , una versione specifica di Python E una libreria C ++ da compilare se si usa Windows? Questo semplifica molto le cose.
— toniedzwiedz
5

L'installazione di questi strumenti può variare a seconda del sistema operativo.

In Windows, node-sass attualmente supporta VS2015 per impostazione predefinita, se nella confezione è presente solo VS2013 e si verifica un errore durante l'esecuzione del comando, è possibile definire la versione di VS aggiungendo: --msvs_version = 2013. Ciò è indicato nella pagina npm di node-sass .

Quindi, la riga di comando sicura che funziona su Windows con VS2013 è: npm install --msvs_version = 2013 gulp node-sass gulp-sass

— Brian Ng
fonte
3

In Windows 10 utilizzando il nodo v6.11.2 e npm v3.10.10 , per eseguire direttamente in qualsiasi cartella:

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

Ho seguito solo le istruzioni in node-sass Github :

  1. Aggiungi i prerequisiti node-gyp eseguendo come amministratore in un Powershell (ci vuole un po '):

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

  2. In una normale shell da riga di comando ( Win+ R+ cmd + Enter) eseguire:

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

    I -gluoghi sotto questi pacchetti %userprofile%\AppData\Roaming\npm\node_modules. Puoi controllare che npm\node_modules\node-sass\bin\node-sassora esista.

  3. Controlla se la variabile d'ambiente dell'account locale (non di sistema) PATH contiene:

    %userprofile%\AppData\Roaming\npm

    Se questo percorso non è presente, npm e node possono ancora essere eseguiti, ma i file bin dei moduli no!

Chiudi la shell precedente e riaprine una nuova ed esegui > node-gypo > node-sass.

Nota:

  • Il windows-build-tools potrebbe non essere necessario (se non compilazione è fatto? Mi piacerebbe leggere se qualcuno ha fatto senza l'installazione di questi strumenti), ma lo ha fatto metti in conto l'amministratore della GYP_MSVS_VERSIONvariabile d'ambiente con 2015come valore.
  • Sono anche in grado di eseguire direttamente altri moduli con file bin , come > uglifyjs main.js main.min.jse> mocha
— Armfoot
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.