CODEWITHSUNDEEP
gulpbowergulp-sass
AlGallaf
AlGallaf

Reputation: 635

How to change SASS path variable using Gulp?

I’m currently using both Bower and Gulp in a Laravel project to manage front end dependencies. I’m downloading all bower dependencies on a private assets folder using Bower and then pushing them to a public folder using Gulp.

Here’s my gulpfile.js

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

gulp.task('fonts', function () {
  return gulp.src('app/assets/vendor/**/*.{ttf,woff,eof,svg}')
    .pipe(flatten())
    .pipe(gulp.dest('.tmp/fonts'))
    .pipe(gulp.dest('public/fonts'));
});

gulp.task('css', function () {
    return gulp.src('assets/vendor/open-sans-fontface/open-sans.scss')
        .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest('public/css'));
});

gulp.task('default', function(){
    gulp.run('fonts');
    gulp.run('css');
});

As you can see, I’m using gulp-flatten to move all font files to the root of /public/fonts Now, the issue that I’m facing is that the font paths in the CSS file generated using gulp-ruby-sass are not correct. How can I fix this?

Upvotes: 1

Views: 2063

Answers (1)

yaserso
yaserso

Reputation: 2868

You could try using the Gulp replace package if you have no alternative built in option with a Gulp file that came with the sass file.

https://www.npmjs.com/package/gulp-replace

Upvotes: 1

Related Questions