web-dev-qa-db-fra.com

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

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

  1. installer libsass?
  2. l'utiliser depuis 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.

csssassgulp-sassnode-sasslibsass
76
Thoran

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

Installation de node-sass

  • (Condition préalable) Si vous n'avez pas npm, installez d'abord Node.js .
  • $ npm install -g node-sass installe globalement node-sass -g.

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

Comment utiliser node-sass à partir des scripts de ligne de commande et 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 manuellement un seul fichier.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ compile manuellement tous les fichiers d'un dossier.
  3. $ node-sass -w sass/ -o css/ compile automatiquement tous les fichiers d'un dossier chaque fois que le ou les fichiers source sont modifiés. -w ajoute une surveillance des modifications apportées au (x) fichier (s).

Des options plus utiles comme 'compression' @ here . La ligne de commande est utile pour une solution rapide. Toutefois, vous pouvez utiliser des exécuteurs de tâches tels que 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 lisez en particulier sur - grouper des tâches .

  • S'il n'y a pas de fichier package.json dans votre répertoire de projet, exécuter $ npm init en créera un. Utilisez-le avec -y pour ignorer les questions.
  • Ajoutez "sass": "node-sass -w sass/ -o css/" au scripts du fichier package.json. Ç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 globalement.
  • S'il n'y a pas de fichier package.json dans votre répertoire de projet, exécuter $ npm init en créera un. Utilisez-le avec -y pour ignorer les questions.
  • $ npm install --save-dev gulp installe Gulp localement. --save-dev ajoute gulp à devDependencies dans package.json.
  • $ npm install gulp-sass --save-dev installe gulp-sass localement.
  • Configurez votre projet en créant un fichier gulpfile.js dans le dossier racine de votre projet avec le contenu suivant:
'use strict';
var gulp = require('gulp');

Un exemple de base pour transpiler

Ajoutez ce code à votre fichier 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 exécute la tâche ci-dessus, qui compile le ou les fichiers .scss du dossier sass et génère le ou les fichiers .css du dossier css.

Pour vous simplifier la vie, ajoutons une montre pour éviter de la compiler manuellement. Ajoutez ce code à votre gulpfile.js:

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

Tout est réglé maintenant! Il suffit de lancer la tâche de surveillance:

$ gulp sass:watch

Comment utiliser avec Node.js

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

Qu'en est-il de 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 construite 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 à ce jour). 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 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.

198
Thoran

L'installation de ces outils peut varier d'un système d'exploitation à l'autre.

Sous Windows, node-sass prend actuellement en charge VS2015 par défaut. Si vous ne disposez que de VS2013 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 le page node-sass npm .

Ainsi, la ligne de commande sécurisée fonctionnant sous Windows avec VS2013 est la suivante: npm install --msvs_version = 2013 gulp node-sass gulp-sass

5
Brian Ng

Dans Windows 10, utilisez noeud v6.11.2 et npm v3.10.1, pour exécuter directement dans n'importe quel dossier:

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

J'ai seulement suivi les instructions dans node-sass Github :

  1. Ajoutez prérequis de nœud-gyp en vous exécutant en tant qu'administrateur dans un Powershell (cela prend un certain temps):

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

  2. Dans un ligne de commande normale Shell (Win+R+ cmd +Enter) courir:

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

    Le -g place ces paquets sous %userprofile%\AppData\Roaming\npm\node_modules. Vous pouvez vérifier que npm\node_modules\node-sass\bin\node-sass existe maintenant.

  3. Vérifiez si votre compte local (pas le système) PATH variable d’environnement contient:

    %userprofile%\AppData\Roaming\npm

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

Fermez le shell précédent , rouvrez-en un nouveau et exécutez > node-gyp ou > node-sass.

Remarque:

  • Le windows-build-tools peut ne pas être nécessaire (si aucune compilation n'est faite? J'aimerais lire si quelqu'un l'a fait sans installer ces outils) , mais la variable d’environnement GYP_MSVS_VERSION a été ajoutée au compte administrateur avec la valeur 2015.
  • Je peux également exécuter directement d'autres modules avec des fichiers bin, tels que > uglifyjs main.js main.min.js et > mocha
2
Armfoot