Comment compiler ou convertir sass / scss en css avec node-sass (pas de Ruby)?

91

J'avais du mal à configurer libsass car ce n'était pas aussi simple que le transpilateur basé sur Ruby. Quelqu'un pourrait-il expliquer comment:

  1. installer libsass?
  2. l'utiliser à partir de la ligne de commande?
  3. l'utiliser avec des coureurs de tâches comme gulp et grunt?

J'ai peu d'expérience avec les gestionnaires de paquets et encore moins avec les coureurs de tâches.

css sass gulp-sass node-sass libsass Thoran
la source

Réponses:

226

J'ai choisi l'implémenteur node-sass pour libsass car il est basé sur node.js.

Installation de node-sass

  • (Prérequis) Si vous n'avez pas npm, installez d' abord Node.js.
  • $ npm install -g node-sassinstalle node-sass globalement -g.

J'espère que cela installera tout ce dont vous avez besoin, sinon lisez libsass en bas.

Comment utiliser node-sass à partir de la ligne de commande et des scripts npm

Format général:

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

Exemples:

  1. $ node-sass my-styles.scss my-styles.css compile un seul fichier manuellement.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ compile tous les fichiers d'un dossier manuellement.
  3. $ node-sass -w sass/ -o css/compile automatiquement tous les fichiers d'un dossier à chaque modification du ou des fichiers source. -wajoute une surveillance des modifications apportées au (x) fichier (s).

Plus d'options utiles comme 'compression' @ ici . La ligne de commande est bonne pour une solution rapide, cependant, vous pouvez utiliser des exécuteurs de tâches comme Grunt.js ou Gulp.js pour automatiser le processus de construction.

Vous pouvez également ajouter les exemples ci-dessus aux scripts npm. Pour utiliser correctement les scripts npm comme alternative à gulp, lisez cet article complet @ css-tricks.com en particulier sur le regroupement des tâches .

  • S'il n'y a pas de package.jsonfichier dans votre répertoire de projet en cours d'exécution $ npm init, vous en créerez un. Utilisez-le avec -ypour sauter les questions.
  • Ajouter "sass": "node-sass -w sass/ -o css/"à scriptsau package.jsonfichier. Ça devrait ressembler a quelque chose comme ca:
"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }
  • $ npm run sass compilera vos fichiers.

Comment utiliser avec gulp

  • $ npm install -g gulp installe Gulp dans le monde entier.
  • S'il n'y a pas de package.jsonfichier dans votre répertoire de projet en cours d'exécution $ npm init, vous en créerez un. Utilisez-le avec -ypour sauter les questions.
  • $ npm install --save-dev gulpinstalle Gulp localement. --save-devajoute gulpà devDependenciesen package.json.
  • $ npm install gulp-sass --save-dev installe gulp-sass localement.
  • Configurez gulp pour votre projet en créant un gulpfile.jsfichier dans le dossier racine de votre projet avec ce contenu:
'use strict';
var gulp = require('gulp');

Un exemple basique pour transpiler

Ajoutez ce code à votre 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 sassexécute la tâche ci-dessus qui compile le (s) fichier (s) .scss dans le sassdossier et génère le (s) fichier (s) .css dans le cssdossier.

Pour vous faciliter la vie, ajoutons une montre pour ne pas avoir à la compiler manuellement. Ajoutez ce code à votre gulpfile.js:

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

Tout est prêt maintenant! Exécutez simplement la tâche de surveillance:

$ gulp sass:watch

Comment utiliser avec Node.js

Comme le nom de node-sass l'indique, vous pouvez écrire vos propres scripts node.js pour le transpilage. Si vous êtes curieux, consultez la page du projet node-sass.

Et libsass?

Libsass est une bibliothèque qui doit être construite par un implémenteur tel que sassC ou dans notre cas node-sass. Node-sass contient une version intégrée de libsass qu'il utilise par défaut. Si le fichier de construction ne fonctionne pas sur votre machine, il essaie de construire libsass pour votre machine. Ce processus nécessite Python 2.7.x (3.x ne fonctionne pas à partir d'aujourd'hui). En outre:

LibSass nécessite GCC 4.6+ ou Clang / LLVM. Si votre système d'exploitation est plus ancien, cette version peut ne pas se compiler. Sous Windows, vous avez besoin de MinGW avec GCC 4.6+ ou VS 2013 Update 4+. Il est également possible de construire LibSass avec Clang / LLVM sous Windows.

Thoran
la source
1
@PublicHandle C'était peut-être la raison, je ne me souviens pas. node-sassest dans gulp-sassles dépendances de , donc pas besoin de l'installer localement.
Thoran
1
@PublicHandle L'installation globale de gulp est nécessaire si vous souhaitez exécuter des tâches gulp à partir de la ligne de commande.
Thoran
1
@Thoran Ah, cela a du sens alors si node-sass est une dépendance de gulp-sass, il n'est donc pas nécessaire localement alors que gulp lui-même est nécessaire aux deux endroits afin qu'il puisse être exécuté sur la ligne de commande et être inclus comme dépendance dans le projet. Merci encore, super article!
PublicHandle
1
@Thoran J'essayais de savoir si je pouvais éviter d'utiliser un lanceur de tâches comme gulp ou grunt et écrire un simple script npm qui fait ce dont j'ai besoin. J'ai regardé dans node-sass, la ligne de commande utilise évidemment glob et boucles sur les fichiers. Je suppose qu'il est préférable de simplement copier ce code.
Bernhard Döbler
1
Donc, pour éviter d'utiliser Ruby , on peut utiliser node.js , une version spécifique de Python ET une bibliothèque C ++ qu'il faut compiler si on utilise Windows? Cela simplifie beaucoup les choses.
toniedzwiedz
5

L'installation de ces outils peut varier selon les systèmes d'exploitation.

Sous Windows, node-sass prend actuellement en charge VS2015 par défaut, si vous n'avez que VS2013 dans votre boîte et rencontrez une erreur lors de l'exécution de la commande, vous pouvez définir la version de VS en ajoutant: --msvs_version = 2013. Ceci est noté sur la page npm de node-sass .

Ainsi, la ligne de commande sûre qui fonctionne sur Windows avec VS2013 est: npm install --msvs_version = 2013 gulp node-sass gulp-sass

Brian Ng
la source
3

Sous Windows 10 en utilisant le nœud v6.11.2 et npm v3.10.10 , afin d'exécuter directement dans n'importe quel dossier:

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

Je n'ai suivi que les instructions de node-sass Github :

  1. Ajoutez les prérequis node-gyp en exécutant en tant qu'administrateur dans un Powershell (cela prend un certain temps):

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

  2. Dans un shell de ligne de commande normal ( Win+ R+ cmd + Enter), exécutez:

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

    Les -gemplacements sous ces paquets %userprofile%\AppData\Roaming\npm\node_modules. Vous pouvez vérifier que cela npm\node_modules\node-sass\bin\node-sassexiste maintenant.

  3. Vérifiez si la variable d'environnement de votre compte local (et non de la PATH variable système) contient:

    %userprofile%\AppData\Roaming\npm

    Si ce chemin n'est pas présent, npm et node peuvent toujours s'exécuter, mais les fichiers bin des modules ne le seront pas!

Fermez le shell précédent et rouvrez-en un nouveau et exécutez soit > node-gypou > node-sass.

Remarque:

  • Le windows-build-tools peut ne pas être nécessaire (si aucune compilation se fait? Je voudrais savoir si quelqu'un fait sans l' installation de ces outils), mais il a toutefois ajouté à l'administrateur compte de la GYP_MSVS_VERSIONvariable d'environnement 2015comme une valeur.
  • Je suis également capable d'exécuter directement d'autres modules avec des fichiers bin , tels que > uglifyjs main.js main.min.jset> mocha
Armfoot
la source