2

I have a Gulp front-end workflow that uses gulp-sass to process my style sources. I also use Bower to get vendors like Foundation 6 for Sites which I love working with.

Here's what my file organisation looks like:

|_ src
  |_ vendor // Custom name for "bower_components"
    |_ foundation-sites
      |_ scss
        |_ grid
          |_ _classes.scss
          |_ _column.scss
          |_ _flex-grid.scss
          |_ _grid.scss
          |_ _gutter.scss
          |_ _layout.scss
          |_ _position.scss
          |_ _row.scss
          |_ _size.scss
        |_ settings
          |_ _settings.scss
  |_ style // Custom styles
    |_ vendor-override // Modifications made on copied/pasted sources from vendors; file organisation and names stay the same. 
      |_ foundation-sites
        |_ scss
          |_ grid
            |_ _flex-grid.scss
          |_ settings
            |_ _settings.scss        
    |_ mais.scss
  |_ gulpfile.js

What I'm trying to achieve is, when available, to get my vendor-override files automatically replacing the original vendor files when compiling.

Here's what my (simplified and focused on the SASS task) gulpfile.js looks like (full Front-End development workflow using NPM, Bower and Gulp available here on GitHub) :

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('src/style/**/*.scss')
    .pipe(sass({
      includePaths: ['src/style/', 'src/style/vendor-override/foundation-sites/scss/', 'src/vendor/foundation-sites/scss/']
    })
    .pipe(gulp.dest('style/'));
});

Please note that in order to avoid declaring complicated @import paths to either the vendor or the vendor overwrite sources, I use the includePaths parameter of the gulp-sass plugin (see above).

Here's how complicated @import paths would look like in my main.scss file:

// Settings
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings/settings';
@import 'vendor-override/foundation-sites/scss/settings/settings';

// Components
@import '../vendor/foundation-sites/scss/grid/grid';
[...]
@include foundation-flex-grid;

And here's how my main.scss actually looks like (paths are the orginal paths form the foundation.scss vendor file) - thanks to gulp-sass includePaths parameter :

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

// Components
@import 'grid/grid';

[...]
@include foundation-flex-grid;    

So far, gulp-sass includePaths parameter works like a charm with my overwrite of foundation-sites/scss/settings/_settings.scss.

But it fails compiling my overwrite of foundation-sites/scss/grid/_flex-grid.scss. And this is probably because _flex.grid.scss is a partial imported from _grid.scss (Foundation's SASS Grid module).

Here's what foundation-sites/scss/grid/_grid.scss looks like (from Foundation's vendor source) :

@import 'row';
@import 'column';
@import 'size';
@import 'position';
@import 'gutter';
@import 'classes';
@import 'layout';

@import 'flex-grid';

As long as an @import is done from the main.scss file, it works. Once an @import is done from a sub file, it doesn't work anymore.

Any idea if what I want to achieve is even possible and you should I proceed ? Many thanks !

0 Answers0