CODEWITHSUNDEEP
gulpgulp-sass
Miura-shi
Miura-shi

Reputation: 4519

Gulp Sass Import Paths Incorrect

I am having an issue with my gulp build file with the sass imports.

I am using gulp-importify to create a build.scss file that has the proper order of my dependencies, third party css, and my custom css.

The Importify task

module.exports = function() {
  APP.gulp.src(APP.concat.sass)
  .pipe(APP.tasks.importify('build.scss', {
    cssPreproc: 'scss'
  }))
  .pipe(APP.gulp.dest('build/sass/'));
};

My folder structure is as follows:

gulp
 - bower_components
 - build
   - sass
     - build.scss
     - modules
       -forms.scss

The build.scss file which contains the imports has the following paths

@import "_bootstrap-sprockets";

@import "variables.scss";

@import "modules/form.scss";

but the bower components are back two directories.

@import "../../bower-components/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets";

@import "variables.scss";

@import "modules/form.scss";

is there any other way or method to setting the full relative/correct import path in Gulp?

Upvotes: 0

Views: 664

Answers (1)

Miura-shi
Miura-shi

Reputation: 4519

I found the solution. I added a base path through gulp.src as follows:

module.exports = function() {
  APP.gulp.src(APP.concat.sass, 
    {base: 'build/sass'})
  .pipe(APP.tasks.imports('build/sass/build.scss', {
    cssPreproc: 'scss'
  }))
  .pipe(APP.gulp.dest('.'));
};

You can also use the global process object available in Node to get the current working directory. So you can set the base to:

{base: process.cwd() }

Upvotes: 0

Related Questions