[Gulp][SASS] Exploiter l’option includePaths de gulp-sass pour définir, en cas de surcharges, un ordre de priorité des chemins vers lequels Gulp ira regarder quand il rencontrera un @import

(Ma question) gulp-sass includePaths parameter and import of partial files declarations that are not in the main.scss issue sur Stack Overflow.

---

Problème: I’m using gulp-sass and would like to define a load_path so that I don’t have to have really long @import rules voor bower dependencies e.g..

…à la place de:

Quel serait le meilleur moyen pour parvenir à ce résultat en utilisant gulp-sass?

Exemple d’utilisation de l’option includePaths de gulp-sass avec les sources SCSS de Foundation 6 for Sites

ATTENTION: gulp-sass semble ne pas digérer le globbing dans les chemins.

gulpconf.json

• config.paths.styles.src: le chemin vers vos SCSS custom
• config.paths.styles.srcIncludePaths: dans mon exemple ci-dessous, on répète le chemin vers les SCSS custom, puis on déclare le chemin vers les surcharges de SCSS relatives aux sources de Foundation ("src/style/vendor-override/foundation-sites/scss/") puis pour finir on déclare le chemin vers les sources out-of-the-box de Foundation qui seront utilisées si Gulp ne trouve aucune surcharge (les surcharges doivent respecter l’arborescence, les noms des dossiers et des fichiers de l’original pour être prises en compte!).

gulp-sass ne supportant pas le globbing dans les chemins, il faudra déclarer des chemins très précis vers vos vendors et vos vendors-override ici. Le dossier vendors-override devra toujours respecter la même arborescence que le dossier vendor pour que l’héritage fonctionne.

gulpfile.js

main.scss

Cette partie de ma main.scss comporte un copier/coller du contenu du fichier foundation.scss qui met en place les bases du framework côté SCSS.

Je n’ai rien modifié mise à part l’ajout de mon propre fichier settings :

Gulp va d’abord chercher les fichiers à importer dans src/style/ (il n’y trouvera rien pour ce qui est de Foundation) avant de se rabattre sur src/style/vendor-override/foundation-sites/scss/, puis sur src/vendor/foundation-sites/scss/.

---

• sass-include-paths – Generates include paths for node-sass for packages from popular package managers like npm, bower, ruby gem, ruby bundler.

• What does Gulp’s includePaths do?

  The SASS compiler uses each path in loadPaths when resolving SASS @imports.

  loadPaths: ['styles/foo', 'styles/bar'] @import "x"; // found via ./styles/foo/_x.scss @import "y"; // found via ./styles/bar/_y.scss

  1 2 3 4

  loadPaths: ['styles/foo', 'styles/bar']   @import "x"; // found via ./styles/foo/_x.scss @import "y"; // found via ./styles/bar/_y.scss

  Note that the compiler resolves each @import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:

  loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv'] @import "x"; // no file at ./styles/i/_x.scss // no file at ./styles/ii/_x.scss // found a file at ./styles/iii/_x.scss ... // ... this file will be used as the import // ... terminate lookup // the file ./styles/iv/_x.scss will be ignored

  1 2 3 4 5 6 7 8

  loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']   @import "x"; // no file at ./styles/i/_x.scss              // no file  at ./styles/ii/_x.scss              // found a file  at ./styles/iii/_x.scss ...              //     ... this file will be used as the import              //     ... terminate lookup              // the file ./styles/iv/_x.scss will be ignored

  There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can’t find the file, then we declare that this @import statement is invalid.

  Load paths is useful if you have a external library (like bournon/neat). The external library is large and will use lots of @import statements. However they won’t match your project folder structure and so won’t resolve. However, you can add an extra folders to the loadPaths so that the @imports inside the external library do resolve.

• gulp-sass work around for load_path support?

  After struggling with this myself I found a option in gulp-sass :

  sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})

  1	sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})

  Example:

  var gulp = require('gulp'), sass = require('gulp-sass') notify = require("gulp-notify"); var config = { sassPath: './resources/sass', // store the sass files I create bowerDir: './bower_components' } gulp.task('css', function() { return gulp.src(config.sassPath + '/style.scss') .pipe(sass({ outputStyle: 'compressed', includePaths: [ './resources/sass', config.bowerDir + '/bootstrap-sass/assets/stylesheets', config.bowerDir + '/font-awesome/scss'] }) .on("error", notify.onError(function (error) { return "Error: " + error.message; }))) .pipe(gulp.dest('./public/css')); });

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  var gulp = require('gulp'),     sass = require('gulp-sass')     notify = require("gulp-notify");   var config = {     sassPath: './resources/sass',   // store the sass files I create     bowerDir: './bower_components' }   gulp.task('css', function() {   return gulp.src(config.sassPath + '/style.scss')     .pipe(sass({         outputStyle: 'compressed',         includePaths: [             './resources/sass',             config.bowerDir + '/bootstrap-sass/assets/stylesheets',             config.bowerDir + '/font-awesome/scss']         })        .on("error", notify.onError(function (error) {             return "Error: " + error.message;         })))     .pipe(gulp.dest('./public/css')); });

• Import and globbing in SASS