(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..
1 |
@import "normalize" |
…à la place de:
1 |
@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize" |
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 customconfig.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.
1 2 3 4 5 6 7 8 9 |
{ "paths": { "styles": { "src": "src/style/", "srcIncludePaths": ["src/style/", "src/style/vendor-override/foundation-sites/scss/", "src/vendor/foundation-sites/scss/"], "dest": "style/" }, } } |
gulpfile.js
1 2 3 4 5 6 7 8 9 10 11 |
gulp.task('sass', function() { gulp.src(config.paths.styles.src + '**/*.scss') .pipe(plugins.sass({ // on déclare les chemins dans l'ordre dans lesquels on souhaite qu'ils soient parcourus pour retrouver les sources SCSS includePaths: config.paths.styles.srcIncludePaths }) .on('error', plugins.sass.logError)) .pipe(plugins.autoprefixer(config.plugins.autoprefixer.browsers)) .pipe(cleanCSS()) .pipe(gulp.dest(config.paths.styles.dest)); }); |
main.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
/** * Foundation for Sites by ZURB * Version 6.4.3 * foundation.zurb.com * Licensed under MIT Open Source */ // Dependencies @import '../_vendor/normalize-scss/sass/normalize'; @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies'; @import '../_vendor/sassy-lists/stylesheets/helpers/true'; @import '../_vendor/sassy-lists/stylesheets/functions/contain'; @import '../_vendor/sassy-lists/stylesheets/functions/purge'; @import '../_vendor/sassy-lists/stylesheets/functions/remove'; @import '../_vendor/sassy-lists/stylesheets/functions/replace'; @import '../_vendor/sassy-lists/stylesheets/functions/to-list'; // Settings // import your own `settings` here or // import and modify the default settings through @import 'settings/settings'; // Sass utilities @import 'util/util'; // Global variables and styles @import 'global'; // Components @import 'grid/grid'; @import 'xy-grid/xy-grid'; @import 'typography/typography'; @import 'forms/forms'; @import 'components/visibility'; @import 'components/float'; @import 'components/button'; @import 'components/button-group'; @import 'components/accordion-menu'; @import 'components/accordion'; @import 'components/badge'; @import 'components/breadcrumbs'; @import 'components/callout'; @import 'components/card'; @import 'components/close-button'; @import 'components/drilldown'; @import 'components/dropdown-menu'; @import 'components/dropdown'; @import 'components/flex'; @import 'components/responsive-embed'; @import 'components/label'; @import 'components/media-object'; @import 'components/menu'; @import 'components/menu-icon'; @import 'components/off-canvas'; @import 'components/orbit'; @import 'components/pagination'; @import 'components/progress-bar'; @import 'components/reveal'; @import 'components/slider'; @import 'components/sticky'; @import 'components/switch'; @import 'components/table'; @import 'components/tabs'; @import 'components/title-bar'; @import 'components/top-bar'; @import 'components/thumbnail'; @import 'components/tooltip'; @import 'prototype/prototype'; @mixin foundation-everything( $flex: true, $prototype: false ) { @if $flex { $global-flexbox: true !global; } @include foundation-global-styles; @if not $flex { @include foundation-grid; } @else { @if $xy-grid { @include foundation-xy-grid-classes; } @else { @include foundation-flex-grid; } } @include foundation-typography; @include foundation-forms; @include foundation-button; @include foundation-accordion; @include foundation-accordion-menu; @include foundation-badge; @include foundation-breadcrumbs; @include foundation-button-group; @include foundation-callout; @include foundation-card; @include foundation-close-button; @include foundation-menu; @include foundation-menu-icon; @include foundation-drilldown-menu; @include foundation-dropdown; @include foundation-dropdown-menu; @include foundation-responsive-embed; @include foundation-label; @include foundation-media-object; @include foundation-off-canvas; @include foundation-orbit; @include foundation-pagination; @include foundation-progress-bar; @include foundation-slider; @include foundation-sticky; @include foundation-reveal; @include foundation-switch; @include foundation-table; @include foundation-tabs; @include foundation-thumbnail; @include foundation-title-bar; @include foundation-tooltip; @include foundation-top-bar; @include foundation-visibility-classes; @include foundation-float-classes; @if $flex { @include foundation-flex-classes; } @if $prototype { @include foundation-prototype-classes; } } @include foundation-everything; |
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 :
1 2 3 4 |
// Settings // import your own `settings` here or // import and modify the default settings through @import 'settings/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.
1234loadPaths: ['styles/foo', 'styles/bar']@import "x"; // found via ./styles/foo/_x.scss@import "y"; // found via ./styles/bar/_y.scssNote 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:
12345678loadPaths: ['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 ignoredThere 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 :
1sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})Example:
1234567891011121314151617181920212223var gulp = require('gulp'),sass = require('gulp-sass')notify = require("gulp-notify");var config = {sassPath: './resources/sass', // store the sass files I createbowerDir: './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