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:
J'ai peu d'expérience avec les gestionnaires de paquets et encore moins avec les coureurs de tâches.
Réponses:
J'ai choisi l'implémenteur node-sass pour libsass car il est basé sur 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.
Format général:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Exemples:
$ node-sass my-styles.scss my-styles.css compile un seul fichier manuellement.$ node-sass my-sass-folder/ -o my-css-folder/ compile tous les fichiers d'un dossier manuellement.$ 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 .
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."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.$ npm install -g gulp installe Gulp dans le monde entier.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.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
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.
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.
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
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 :
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
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.
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:
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.> uglifyjs main.js main.min.jset> mocha
node-sassest dansgulp-sassles dépendances de , donc pas besoin de l'installer localement.