Comment comstackr 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 transstackr basé sur Ruby. Quelqu’un pourrait-il expliquer comment:

  1. installer libsass?
  2. l’utiliser depuis la ligne de commande?
  3. utilisez-le avec des utilisateurs comme Gulp and Grunt?

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

J’ai choisi un implémenteur de node-sass pour libsass car il est basé sur node.js.

Installer node-sass

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

Nous espérons pouvoir installer tout ce dont vous avez besoin, sinon lire libsass en bas.

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

Format général:

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

Exemples:

  1. $ node-sass my-styles.scss my-styles.css comstack manuellement un seul fichier.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ comstack tous les fichiers dans un dossier manuellement.
  3. $ node-sass -w sass/ -o css/ comstack automatiquement tous les fichiers d’un dossier chaque fois que le ou les fichiers source sont modifiés. -w ajoute une surveillance des modifications apscopes au (x) fichier (s).

Des options plus utiles comme «compression» @ ici . La ligne de commande est utile pour une solution rapide, mais vous pouvez utiliser des programmes d’exécution tels que Grunt.js ou Gulp.js pour automatiser le processus de génération.

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

  • S’il n’y a pas de fichier package.json dans votre répertoire de projet, l’exécution de $ npm init en créera un. Utilisez-le avec -y pour sauter les questions.
  • Ajoutez "sass": "node-sass -w sass/ -o css/" aux 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 comstackra 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, l’exécution de $ npm init en créera un. Utilisez-le avec -y pour sauter les questions.
  • $ npm install --save-dev gulp installe Gulp localement. --save-dev ajoute devDependencies à devDependencies dans package.json .
  • $ npm install gulp-sass --save-dev installe gulp-sass localement.
  • Installez gulp pour votre projet en créant un fichier gulpfile.js dans le dossier racine de votre projet avec ce contenu:
 'use ssortingct'; var gulp = require('gulp'); 

Un exemple basique à transstackr

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 sass exécute la tâche ci-dessus qui comstack les fichiers .scss dans le dossier sass et génère des fichiers .css dans le dossier css .

Pour faciliter la vie, ajoutons une montre afin de ne pas avoir à la comstackr 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’indique, vous pouvez écrire vos propres scripts node.js pour le transpiling. 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 créée par un implémenteur tel que sassC ou dans notre cas, node-sass. Node-sass contient une version intégrée de libsass utilisée par défaut. Si le fichier de compilation ne fonctionne pas sur votre ordinateur, il tente de générer libsass pour votre ordinateur. 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 être compilée. 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.

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 que vous rencontrez des erreurs 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écurisée qui fonctionne sous Windows avec VS2013 est la suivante: npm install –msvs_version = 2013 gulp node-sass gulp-sass

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

 > node-sass [options]  [output.css] 

Je n’ai suivi que les instructions dans Github node-sass :

  1. Ajoutez les prérequirejs node-gyp en exécutant en tant qu’admin dans un Powershell (cela prend du temps):

     > npm install --global --production windows-build-tools 
  2. Dans un shell de ligne de commande normal ( Win + R + cmd + Entrée ), exécutez:

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

    -g place ces packages 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 variable d’environnement PATH compte local (pas le système) contient:

     %userprofile%\AppData\Roaming\npm 

    Si ce chemin n’est pas présent, npm et node peuvent encore être exécutés, mais les fichiers bin des modules ne le seront pas!

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

Remarque:

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