Skip to content

Instantly share code, notes, and snippets.

@dkebler
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dkebler/6c4a635fbafb84c86175 to your computer and use it in GitHub Desktop.
Save dkebler/6c4a635fbafb84c86175 to your computer and use it in GitHub Desktop.
Getting Gulp to find sass @imports within bower packages - node-sass
// Assumes you are using node-sass. Sadly this is not an automated solution.
// You have to know where the scss of each bower package is located
// if you add a package you'll have to add another config.bowerDir + '/path/to/package/scss/' to the sass task.
// some package scss have more @import lines to other scss so be sure to add those paths as well (like with foundation)
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var config = {

 sassPath: './path/to/your/project/scss',

 bowerDir: './path/to/bower_components'
,
cssPath: './path/to/your/public/css'
}
gulp.task('sass', function() {

return gulp.src(config.sassPath + '/sitestyle.scss')

 .pipe(sass({
sourceComments: 'map',
errLogToConsole: true,

// includePaths is the node-sass switch,
includePaths: [

 config.sassPath,

 config.bowerDir + '/path/to/package/scss/',
// add as many more of the previous line as needed for your other bower packages
config.bowerDir + '/different/path/to/another/package/scss'


 ]

 })
)

 .pipe(gulp.dest(config.cssPath));

});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(config.sassPath + '/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['sass']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment