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 !