noeud culot
v9.0.0
Avertissement : Node Sass a atteint la fin de sa vie. Il ne recevra plus de versions, même pour les correctifs de sécurité. Les projets qui l'utilisent encore devraient passer à Dart Sass.
Les versions de Node.js prises en charge varient selon la version, veuillez consulter la page des versions.
Les versions de nœud qui arrivent en fin de vie https://github.com/nodejs/Release seront supprimées du support à chaque version de nœud-sass (majeure, mineure).
Nous arrêterons de créer des binaires pour les versions non prises en charge, de tester les ruptures de compatibilité des dépendances, mais nous ne bloquerons pas les installations pour ceux qui souhaitent se prendre en charge eux-mêmes.
La nouvelle version du nœud nécessite des modifications internes mineures ainsi que la prise en charge des fournisseurs CI (AppVeyor, GitHub Actions). Nous ouvrirons un seul numéro auquel les parties intéressées pourront s'abonner et clôturerons les numéros supplémentaires.
Vous trouverez ci-dessous un guide rapide pour les versions minimales et maximales prises en charge de node-sass :
| NoeudJS | Version nœud-sass prise en charge | Module de nœud |
|---|---|---|
| Nœud 20 | 9.0+ | 115 |
| Nœud 19 | 8.0+ | 111 |
| Nœud 18 | 8.0+ | 108 |
| Nœud 17 | 7,0+, <8,0 | 102 |
| Nœud 16 | 6.0+ | 93 |
| Nœud 15 | 5,0+, <7,0 | 88 |
| Nœud 14 | 4,14+, <9,0 | 83 |
| Nœud 13 | 4,13+, <5,0 | 79 |
| Nœud 12 | 4,12+, <8,0 | 72 |
| Nœud 11 | 4,10+, <5,0 | 67 |
| Nœud 10 | 4,9+, <6,0 | 64 |
| Nœud 8 | 4.5.3+, <5.0 | 57 |
| Nœud <8 | <5,0 | <57 |
Il vous permet de compiler nativement des fichiers .scss en CSS à une vitesse incroyable et automatiquement via un middleware de connexion.
Trouvez-le sur npm : https://www.npmjs.com/package/node-sass
Suivez @nodesass sur Twitter pour les mises à jour : https://twitter.com/nodesass
npm installer nœud-sass
Certains utilisateurs ont signalé des problèmes d'installation sur Ubuntu en raison de l'enregistrement node dans un autre package. Suivez la documentation officielle de NodeJS pour installer NodeJS afin que #!/usr/bin/env node soit correctement résolu.
La compilation sur des machines Windows nécessite les prérequis node-gyp.
Voyez-vous l’erreur suivante ? Consultez notre guide de dépannage.**
SyntaxError: Use of const in strict mode.
Vous rencontrez des problèmes d'installation ? Consultez notre guide de dépannage.
npm install -g miroir-config-china --registry=https://registry.npmmirror.com npm installer nœud-sass
var sass = require('node-sass');sass.render({
fichier : scss_filename,
[, options..]}, function(err, result) { /*...*/ });// ORvar result = sass.renderSync({
données : scss_content
[,options..]}); Type : String
Par défaut : null
Spécial : file ou data doit être précisé
Chemin d'accès à un fichier que LibSass doit compiler.
Type : String
Par défaut : null
Spécial : file ou data doit être précisé
Une chaîne à transmettre à LibSass pour compiler. Il est recommandé d'utiliser includePaths conjointement avec ceci afin que LibSass puisse trouver des fichiers lors de l'utilisation de la directive @import .
Il s'agit d'une fonctionnalité expérimentale de LibSass. A utiliser avec prudence.
Type : Function | Function[] function(url, prev, done)
Par défaut : undefined
Paramètres de fonction et informations :
url (String) - le chemin dans import tel quel , que LibSass a rencontré
prev (String) - le chemin précédemment résolu
done (Function) - une fonction de rappel à invoquer lors de l'achèvement asynchrone, prend un littéral d'objet contenant
file (String) - un chemin alternatif que LibSass peut utiliser OU
contents (String) - le contenu importé (par exemple, lu depuis la mémoire ou le système de fichiers)
Gère lorsque LibSass rencontre la directive @import . Un importateur personnalisé permet l'extension du moteur LibSass de manière à la fois synchrone et asynchrone. Dans les deux cas, le but est soit de return , soit d’appeler done() avec un objet littéral. En fonction de la valeur du littéral d'objet, l'une des deux choses suivantes se produira.
Lors du retour ou de l'appel done() avec { file: "String" } , le nouveau chemin de fichier sera supposé pour le @import . Il est recommandé de garder à l'esprit la valeur de prev dans les cas où une résolution de chemin relatif peut être requise.
Lors du retour ou de l'appel done() avec { contents: "String" } , la valeur de la chaîne sera utilisée comme si le fichier avait été lu via une source externe.
À partir de la version 3.0.0 :
this fait référence à une portée contextuelle pour l'exécution immédiate de sass.render ou sass.renderSync
les importateurs peuvent renvoyer une erreur et LibSass émettra cette erreur en réponse. Par exemple:
done(new Error('n'existe pas !'));// ou return synchronelyreturn new Error('rien à faire ici'); L'importateur peut être un tableau de fonctions, qui seront appelées par LibSass dans l'ordre de leur apparition dans le tableau. Cela aide l'utilisateur à spécifier un importateur spécial pour un type particulier de chemin (système de fichiers, http). Si un importateur ne souhaite pas gérer un chemin particulier, il doit renvoyer null . Voir la section fonctions pour plus de détails sur les types Sass.
Il s'agit d'une fonctionnalité expérimentale de LibSass. A utiliser avec prudence.
functions est un Object qui contient une collection de fonctions personnalisées qui peuvent être invoquées par les fichiers sass en cours de compilation. Ils peuvent prendre zéro ou plusieurs paramètres d'entrée et doivent renvoyer une valeur soit de manière synchrone ( return ...; ) soit de manière asynchrone ( done(); ). Ces paramètres seront des instances de l'un des constructeurs contenus dans le require('node-sass').types . La valeur de retour doit également être de l'un de ces types. Consultez la liste des types disponibles ci-dessous :
getValue() / setValue(value) : obtient/définit la partie numérique du nombre
getUnit() / setUnit(unit) : obtient/définit la partie unité du nombre
getValue() / setValue(value) : obtient/définit la chaîne incluse
getR() / setR(value) : composant rouge (entier de 0 à 255 )
getG() / setG(value) : composant vert (entier de 0 à 255 )
getB() / setB(value) : composant bleu (entier de 0 à 255 )
getA() / setA(value) : composant alpha (nombre de 0 à 1.0 )
Exemple:
var Couleur = require('node-sass').types.Color,
c1 = nouvelle couleur (255, 0, 0),
c2 = nouvelle couleur (0xff0088cc) ; getValue() : obtient le booléen inclus
types.Boolean.TRUE : instance singleton de types.Boolean qui contient "true"
types.Boolean.FALSE : instance singleton de types.Boolean qui contient "false"
getValue(index) / setValue(index, value) : value doit elle-même être une instance de l'un des constructeurs de sass.types .
getSeparator() / setSeparator(isComma) : s'il faut utiliser des virgules comme séparateur
getLength()
getKey(index) / setKey(index, value)
getValue(index) / setValue(index, value)
getLength()
types.Null.NULL : instance singleton de types.Null .
sass.renderSync({
données : '#{headings(2,5)} { couleur : #08c ; }',
fonctions : {'headings($from : 0, $to : 6)' : function(from, to) { var i, f = from.getValue(), t = to.getValue(), list = new sass.types .Liste(t - f + 1); for (i = f; i <= t; i++) {list.setValue(i - f, new sass.types.String('h' + i)); } liste de retour ;}
}}); Tapez : Array
Défaut: []
Un tableau de chemins que LibSass peut consulter pour tenter de résoudre vos déclarations @import . Lorsque vous utilisez data , il est recommandé de l'utiliser.
Type : Boolean
Par défaut : false
les valeurs true activent la syntaxe Sass Indented pour analyser la chaîne de données ou le fichier.
Remarque : node-sass/libsass compilera une bibliothèque mixte de fichiers scss et de syntaxe indentée (.sass) avec le paramètre par défaut (false) tant que les extensions .sass et .scss sont utilisées dans les noms de fichiers.
Type : String
Par défaut : space
Utilisé pour déterminer s'il faut utiliser un espace ou un caractère de tabulation pour l'indentation.
Type : Number
Par défaut : 2
Maximum : 10
Utilisé pour déterminer le nombre d'espaces ou de tabulations à utiliser pour l'indentation.
Type : String
Par défaut : lf
Utilisé pour déterminer s'il faut utiliser la séquence cr , crlf , lf ou lfcr pour le saut de ligne.
Type : Boolean
Par défaut : false
Spécial : lorsque vous utilisez ceci, vous devez également spécifier outFile pour éviter un comportement inattendu.
les valeurs true désactivent l’inclusion des informations de carte source dans le fichier de sortie.
Type : String | null
Par défaut : null
Spécial : obligatoire lorsque sourceMap est une valeur véridique
Spécifiez l'emplacement prévu du fichier de sortie. Fortement recommandé lors de la sortie de cartes sources afin qu'elles puissent se référer correctement aux fichiers prévus.
Attention, activer cette option n'écrira pas le fichier sur le disque à votre place, c'est uniquement à des fins de référence interne (pour générer la carte par exemple).
Exemple sur la façon de l'écrire sur le disque
sass.render({...outFile : votrePathTotheFile,
}, function(error, result) { // rappel de style nœud à partir de la v3.0.0 si(!error){ // Aucune erreur lors de la compilation, écrivez ce résultat sur le disque fs.writeFile(yourPathTotheFile, result.css, function (err){if(!err){ //fichier écrit sur le disque} });}
});}); Type : String
Par défaut : nested
Valeurs : nested , expanded , compact , compressed
Détermine le format de sortie du style CSS final.
Type : Integer
Par défaut : 5
Utilisé pour déterminer combien de chiffres après la virgule seront autorisés. Par exemple, si vous aviez un nombre décimal de 1.23456789 et une précision de 5 , le résultat sera 1.23457 dans le CSS final.
Type : Boolean
Par défaut : false
true Permet au numéro de ligne et au fichier dans lequel un sélecteur est défini d'être émis dans le CSS compilé sous forme de commentaire. Utile pour le débogage, en particulier lors de l'utilisation d'importations et de mixins.
Type : Boolean | String | undefined
Par défaut : undefined
Permet la génération de la carte source pendant render et renderSync .
Lorsque sourceMap === true , la valeur de outFile est utilisée comme emplacement de sortie cible pour la carte source avec le suffixe .map ajouté. Si aucun outFile n’est défini, le paramètre sourceMap est ignoré.
Lorsque typeof sourceMap === "string" , la valeur de sourceMap sera utilisée comme emplacement d'écriture pour le fichier.
Type : Boolean
Par défaut : false
true inclut le contents des informations de la carte source
Type : Boolean
Par défaut : false
true intègre la carte source en tant qu'URI de données
Type : String
Par défaut : undefined
la valeur sera émise en tant que sourceRoot dans les informations de la carte source
render (>= v3.0.0) node-sass prend en charge les rappels asynchrones de style nœud standard avec la signature de function(err, result) . Dans des conditions d'erreur, l'argument error est renseigné avec l'objet d'erreur. En cas de réussite, l'objet result est rempli avec un objet décrivant le résultat de l'appel de rendu.
message (String) - Le message d'erreur.
line (Number) - Le numéro de ligne de l'erreur.
column (Number) - Le numéro de colonne de l'erreur.
status (Numéro) - Le code d'état.
file (String) - Le nom du fichier de l'erreur. Dans le cas où l'option file n'a pas été définie (en faveur de data ), cela reflétera la valeur stdin .
css (Buffer) - Le CSS compilé. Écrivez-le dans un fichier ou distribuez-le si nécessaire.
map (Buffer) - La carte source
stats (Object) - Un objet contenant des informations sur la compilation. Il contient les clés suivantes :
entry (String) - Le chemin d'accès au fichier scss, ou data si la source n'était pas un fichier
start (Number) - Date.now() avant la compilation
end (Number) - Date.now() après la compilation
duration (Nombre) - fin - début
includedFiles (Array) - Chemins absolus vers tous les fichiers scss associés, sans ordre particulier.
var sass = require('node-sass');sass.render({
fichier : '/chemin/vers/monFichier.scss',
data : 'body{background:blue; a{couleur:noir;}}',
importer : function(url, prev, done) {// url est le chemin d'importation tel quel que LibSass a rencontré. // prev est le chemin précédemment résolu. // done est un rappel facultatif, consommez-le ou renvoyez la valeur de manière synchrone .// this.options contient ce hachage d'options, this.callback contient le style de nœud callbacksomeAsyncFunction(url, prev, function(result){ done({file: result.path, // un seul d'entre eux est requis, voir la section Comportements spéciaux.contents : result.data });});// ORvar result = someSyncFunction(url, prev);return {file: result.path, contents: result.data};
},
includePaths : [ 'lib/', 'mod/' ],
outputStyle : 'compressed'}, function(error, result) { // rappel de style nœud à partir de la version 3.0.0
si (erreur) {console.log(erreur.status); // était auparavant "code" dans v2x et ci-dessousconsole.log(error.column);console.log(error.message);console.log(error.line);
}
else {console.log(result.css.toString());console.log(result.stats);console.log(result.map.toString());// ou betterconsole.log(JSON.stringify(result. carte)); // remarque, JSON.stringify accepte également Buffer
}});// résultat ORvar = sass.renderSync({
fichier : '/chemin/vers/fichier.scss',
data : 'body{background:blue; a{couleur:noir;}}',
Style de sortie : 'compressé',
fichier de sortie : '/to/my/output.css',
sourceMap : true, // ou un chemin absolu ou relatif (vers outFile)
importer : function(url, prev, done) {// url est le chemin d'importation tel quel que LibSass a rencontré. // prev est le chemin précédemment résolu. // done est un rappel facultatif, consommez-le ou renvoyez la valeur de manière synchrone .// this.options contient ces options hashsomeAsyncFunction(url, prev, function(result){ done({file: result.path, // un seul d'entre eux est requis, voir section Special Behaviours.contents: result.data }) ;});// ORvar result = someSyncFunction(url, prev);return {file: result.path, contents: result.data};
}});console.log(result.css);console.log(result.map);console.log(result.stats); Dans le cas où les options file et data sont définies, node-sass donnera la priorité aux data et utilisera file pour calculer les chemins dans les cartes sources.
Les informations de version node-sass et libsass sont désormais exposées via la méthode info :
var sass = require('node-sass');console.log(sass.info);/* cela affichera quelque chose comme : node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Compilateur Sass) [ C/C++]*/Puisque node-sass >=v3.0.0, la version de LibSass est déterminée au moment de l'exécution.
Liste des utilisations communautaires de node-sass dans les outils et frameworks de build.
@jasonsanjose a créé une extension Brackets basée sur node-sass : https://github.com/jasonsanjose/brackets-sass. Lors de la modification de fichiers Sass, l'extension compile les modifications lors de l'enregistrement. L'extension s'intègre également à Live Preview pour afficher les modifications Sass dans le navigateur sans enregistrer ni compiler.
Le plugin sass officiel de Brunch utilise node-sass par défaut et revient automatiquement à Ruby si l'utilisation de Compass est détectée : https://github.com/brunch/sass-brunch
Recompilez automatiquement les fichiers .scss pour les serveurs HTTP basés sur Connect et Express.
Cette fonctionnalité a été déplacée vers node-sass-middleware dans node-sass v1.0.0
@10xLaCroixDrinker a écrit un plugin DocPad qui compile les fichiers .scss à l'aide de node-sass : https://github.com/docpad/docpad-plugin-nodesass
@stephenway a créé une extension qui transpile Sass en CSS en utilisant node-sass avec duo.js https://github.com/duojs/sass
@sindresorhus a créé un ensemble de tâches grunt basées sur node-sass : https://github.com/sindresorhus/grunt-sass
@dlmanning a créé un plugin gulp sass basé sur node-sass : https://github.com/dlmanning/gulp-sass
Le serveur Web Harp de @sintaxi compile implicitement les fichiers .scss à l'aide de node-sass : https://github.com/sintaxi/harp
@stevenschobert a créé un plugin metalsmith basé sur node-sass : https://github.com/stevenschobert/metalsmith-sass
@fourseven a créé un plugin météore basé sur node-sass : https://github.com/fourseven/meteor-scss
@dbashford a créé un module Mimosa pour sass qui inclut node-sass : https://github.com/dbashford/mimosa-sass
Il existe également un exemple d'application de connexion ici : https://github.com/andrew/node-sass-example
Node-sass inclut des binaires précompilés pour les plateformes populaires, pour ajouter un binaire pour votre plateforme, suivez ces étapes :
Découvrez le projet :
git clone --recursive https://github.com/sass/node-sass.gitcd node-sass installation npm node scripts/build -f # utilisez le commutateur -d pour la version de débogage# en cas de succès, il générera et déplacera# le binaire dans le répertoire du fournisseur.
L'interface pour l'utilisation en ligne de commande est assez simpliste à ce stade, comme le montre la section d'utilisation suivante.
La sortie sera envoyée à stdout si l'indicateur --output est omis.
node-sass [options] [output] Ou : cat | node-sass > output
Exemple:
node-sass src/style.scss dest/style.css
Possibilités :
-w, --watch Regarder un répertoire ou un fichier
-r, --recursive Regarder récursivement des répertoires ou des fichiers
-o, --output Répertoire de sortie
-x, --omit-source-map-url Omettre le commentaire de l'URL de la carte source de la sortie
-i, --indented-syntax Traiter les données de stdin comme du code sass (par rapport à scss)
-q, --quiet Supprimer la sortie du journal sauf en cas d'erreur
-v, --version Affiche les informations de version
--output-style Style de sortie CSS (imbriqué | développé | compact | compressé)
--indent-type Type d'indentation pour la sortie CSS (espace | tabulation)
--indent-width Largeur du retrait ; nombre d'espaces ou de tabulations (valeur maximale : 10)
--linefeed Style de saut de ligne (cr | crlf | lf | lfcr)
--source-comments Inclure les informations de débogage dans la sortie
--source-map Émettre la carte source
--source-map-contents Intégrer le contenu dans la carte
--source-map-embed Intégrer sourceMappingUrl comme URI de données
--source-map-root Le chemin de base sera émis tel quel dans la carte source
--include-path Chemin pour rechercher les fichiers importés
--follow Suivre les répertoires liés par des liens symboliques
--precision Le degré de précision autorisé en nombres décimaux
--error-bell Afficher un caractère de cloche en cas d'erreur
--importer Chemin d'accès au fichier .js contenant l'importateur personnalisé
--functions Chemin d'accès au fichier .js contenant des fonctions personnalisées
--help Imprimer les informations d'utilisation L' input peut être soit un seul .scss ou .sass , soit un répertoire. Si l'entrée est un répertoire, l'indicateur --output doit également être fourni.
Notez également que --importer prend le chemin (absolu ou relatif au pwd) vers un fichier js, qui doit avoir un module.exports par défaut défini sur la fonction d'importation. Voir nos montages de test par exemple.
L'option --source-map accepte une valeur booléenne, auquel cas elle remplace l'extension de destination par .css.map . Il accepte également le chemin d'accès au fichier .map et même le chemin d'accès au répertoire souhaité. Lors de la compilation d'un répertoire, --source-map peut être soit une valeur booléenne, soit un répertoire.
node-sass prend en charge différents paramètres de configuration pour modifier les paramètres liés au binaire sass tels que le nom du binaire, le chemin binaire ou le chemin de téléchargement alternatif. Les paramètres suivants sont pris en charge par node-sass :
| Nom de la variable | Paramètre .npmrc | Argument de processus | Valeur |
|---|---|---|---|
| SASS_BINARY_NAME | sass_nom_binaire | --sass-nom-binaire | chemin |
| SASS_BINARY_SITE | sass_binary_site | --sass-binary-site | URL |
| SASS_BINARY_PATH | sass_binary_path | --sass-chemin-binaire | chemin |
| SASS_BINARY_DIR | sass_binary_dir | --sass-binary-dir | chemin |
| SASS_REJECT_UNAUTHORIZED | sass_reject_unauthorized | --sass-reject-non autorisé | valeur |
Ces paramètres peuvent être utilisés comme variable d'environnement :
Par exemple, export SASS_BINARY_SITE=http://example.com/
En tant que fichier de configuration .npmrc local ou global :
Par exemple, sass_binary_site=http://example.com/
Comme argument de processus :
Par exemple, npm install node-sass --sass-binary-site=http://example.com/
Si vous utilisez des certificats auto-signés pour votre binaire, SASS_REJECT_UNAUTHORIZED remplacera (rejectUnauthorized)[https://nodejs.org/docs/latest/api/tls.html#tls_tls_createserver_options_secureconnectionlistener].
L'installation n'exécute que deux tests Mocha pour voir si votre machine peut utiliser LibSass pré-construit, ce qui permettra de gagner du temps lors de l'installation. Si des tests échouent, il sera construit à partir des sources.
Ce module vous est présenté et maintenu par les personnes suivantes :
Michael Mifsud - Chef de projet (Github / Twitter)
Andrew Nesbitt (Github / Twitter)
Doyen Mao (Github / Twitter)
Brett Wilkins (Github / Twitter)
Keith Cirkel (Github / Twitter)
Laurent Goderre (Github / Twitter)
Nick Schönning (Github / Twitter)
Adeel Moudjahid (Github / Twitter)
Nous <3 nos contributeurs ! Un merci spécial à tous ceux qui ont consacré du temps de développement à ce projet, nous apprécions vraiment votre travail acharné. Vous pouvez trouver une liste complète de ces personnes ici.
Consultez notre guide de contribution
Copyright (c) 2015 Andrew Nesbitt. Voir LICENCE pour plus de détails.
