Not passing the right paths to gulp-sourcemaps for multi-level @imports

[davidtheclark]

I am not sure if this is an issue with gulp-sass or gulp-sourcemaps, so please let me know if you think I have to file this issue with gulp-sourcemaps instead.

I have directory something structure like this, all within src/main/style/:

• main.scss
• _global-settings.scss
• components/
  • _foo.scss
  • ...
• globals/
  • _bar.scss
  • ...
• themes/
  • foo-theme
    • foo-theme_main.scss
    • _foo-theme_settings.scss
    • _foo-theme_overrides.scss
    • ...
  • ...

And main.scss imports global things and compiles to main.css.

// main.scss
@import "global-settings";
@import "components/foo";
@import "globals/bar";

foo-theme_main.scss imports its own settings file, then main.scss and everything that entails, then its own overrides, and compiles to foo-theme_main.css.

// foo-theme_main.scss
@import "foo-theme_settings";
@import "../../main";
@import "foot-theme-overrides";

I compile these with a gulp task something like this:

gulp.task('style', function () {
  gulp.src(['./src/style/**/*.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    ...
});

And then I run into an error like this:

gulp-sourcemaps-write: source file not found:path\to\src\components\_foo.scss
gulp-sourcemaps-write: source file not found:path\to\src\globals\bar.scss

(I'm on Windows, hence the \)

Notice that the path of the file that was not found should start with \src\main\style\ but for some reason the \main\style\ part of the path is getting lost in the processing and the file is not being found.

If I change my gulp.src to be just ./src/style/themes/foo-theme/foo-theme_main.scss then the task works fine. So it seems that the problem has to do with the globbing?

Am I doing it wrong, or is this a bug?

(I'm on Windows, running gulp-sass v1.0.0 and gulp-sourcemaps v1.2.2.)

[valdelama]

+1 Having the same issue

[valdelama]

Never mind, my issue is different and only occurs when I use sourcemaps in conjunction with autoprefixer

[davidtheclark]

Wonder if this is related to sass/node-sass#425

[davidtheclark]

Here's a reduced test case:

package.json

{
  "name": "gulp-sass-test",
  "version": "1.0.0",
  "dependencies": {
    "gulp": "^3.8.8",
    "gulp-sass": "^1.0.0",
    "gulp-sourcemaps": "^1.2.2"
  }
}

gulpfile.js

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

gulp.task('style', function () {
    return gulp.src('./scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./css'));
});

gulp.task('styleSpecific', function () {
    return gulp.src(['./scss/primary.scss', './scss/secondary/secondary.scss'])
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./css'));
});

scss/primary.scss

@import "tertiary/tertiary";

scss/secondary/secondary.scss

@import "../primary";

scss/tertiary/tertiary.scss

body {
    background: pink;
}

Run gulp style and you get the error:

gulp-sourcemap-write: source file not found:/Users/davidclark/dev/me/gulp-sass-test/tertiary/_tertiary.scss

Run gulp styleSpecific and everything is fine.

Really hoping somebody more knowledgeable than me can track down what's going wrong here.

[jonathan-reisdorf]

Having the same issue, hope that PR 97 will fix this. :)