sass - instalar - ¿Qué hace Gulp''s includePaths?

npm sass

Question

Estoy intentando comenzar a usar las bibliotecas Bourbon y Neat Sass en mi proyecto. Quiero compilar Sass con Gulp. Esta es una configuración sencilla de tareas de styles que he encontrado en uno de los tutoriales:

var gulp = require(''gulp''),
sass = require(''gulp-sass''),
neat = require(''node-neat'').includePaths;
var paths = {
scss: ''./assets/styles/*.scss''
};
gulp.task(''styles'', function () {
return gulp.src(paths.scss)
.pipe(sass({
includePaths: [''styles''].concat(neat)
}))
.pipe(gulp.dest(''./dist/styles''));
});
gulp.task(''default'', function () {
gulp.start(''styles'');
});

Luego en el archivo principal .scss las importaciones:

@import "bourbon";
@import "base/base";
@import "neat";

Esta tarea se ejecuta correctamente.

Lo que me desconcierta aquí es lo que includePaths hace exactamente? Basándose en el ejemplo anterior, ¿puede alguien explicarme cuál es el rol de includePath ?

Answer 1

includePaths

Tipo: Array Valor predeterminado: []

Un conjunto de rutas en las que puede mirar libsass para intentar resolver sus declaraciones de @import. Cuando use datos, se recomienda que use esto.

en sass, puede organizar sus archivos sass en varias carpetas, pero desea que main.sass pueda importarlos cuando se includePaths , para que pueda especificar includePaths , para que sass sepa dónde encontrar el @import sass file , Aquí usa node-neat , si desea importar algunos estilos desde él, de forma predeterminada, Sass no sabe dónde buscar, por lo que necesita decirle a Sass dónde encontrar el archivo para importar.

Answer 2

El compilador SASS usa cada ruta en loadPaths cuando resuelve SASS @imports.

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

Tenga en cuenta que el compilador resuelve cada @import considerando cada ruta en loadPaths de izquierda a derecha (similar a $PATH en un entorno UNIX). Un ejemplo de escenario podría ser:

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

No había ningún archivo _x.scss en styles/i , por lo que se pasó a buscar dentro de styles/ii . Finalmente, encontró un archivo _x.scss en styles/iii y terminó la búsqueda. Mira cada carpeta en loadPaths comenzando desde el primer elemento de la matriz y moviéndose hacia la derecha. Después de intentar todas las rutas, si no podemos encontrar el archivo, declaramos que esta declaración @import no es válida.

Cargar rutas es útil si tiene una biblioteca externa (como bournon / neat). La biblioteca externa es grande y usará muchas declaraciones de @import. Sin embargo, no coincidirán con la estructura de carpetas de su proyecto y, por lo tanto, no se resolverán. Sin embargo, puede agregar carpetas adicionales a las loadPaths para que se resuelvan las @imports dentro de la biblioteca externa.