gulp-sourcemaps génère des sources incorrectes dans .css.map

Question

Je n'arrive pas à comprendre ce qui ne va pas avec ma configuration de gulp et gulp-sourcemaps. Mon main.css et main.css.map sont compilés, mais je reçois des sources incorrectes:

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css","/assets/sass/main.css" [...] etc 

Il affiche jamais autre chose que main.css comme source. Lorsque j'inspecte via le navigateur et que je clique sur la source, il me montre le dernier fichier importé dans SCSS .

C'est ma tâche Gulp:

gulp.task('sass', function() { 
    return gulp.src(config.sass.src) 
     .pipe(sourcemaps.init({largeFile: true})) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(config.sass.dest)); 
}); 

Mon config.sass.src est assets/sass/**/*.{sass,scss}

j'avais aussi quelques autoprefixer pipes et cssnano mais je l'ai commenté toutes les choses supplémentaires sur et essayé de courir ça aussi , hélas, même chose.

Voici un exemple minimal de mon SCSS:

main.scss:

@import "components/buttons"; 

components/_buttons.scss:

button { 
    padding: 10px; 
    background: black; 
    color: white; 
    border: 0; 
    border-radius: 0; 
} 

Ce produit les éléments suivants dans le css.map:

{"version":3,"file":"main.css","sources":["/assets/sass/main.css","/assets/sass/main.css"],"sourcesContent":["@import \"components/buttons\";","button {\n padding: 10px;\n background: black;\n color: white;\n border: 0;\n border-radius: 0;\n}"],"mappings":"ACAA,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,IAAK;EACd,UAAU,EAAE,KAAM;EAClB,KAAK,EAAE,KAAM;EACb,MAAM,EAAE,CAAE;EACV,aAAa,EAAE,CAAE,GACpB","names":[]} 

utilisant:

• gulp 3.9.1
• gulp-SASS 2.3.2
• Gulp-sourcemaps 1.10.0

Answer 1

Il est a bug dans la version de gulp-sourcemaps que vous utilisez .

Mise à jour de 1.10.0 à 1.10.1 devrait résoudre le problème:

npm install --save-dev gulp-sourcemaps