SASS /ソースマップがネストされた構造でロードされない

Question

同じディレクトリにあるすべてのSASSファイルから、次のようにネストされた構造に行きました。さて、クロムの要素を調べると、間違ったソースマップが表示されます。たとえば、ボタンを調べると、_buttons partialに行くのではなく、無関係な別のランダムな部分に移動します。誰がなぜこれが起こっているのか知っていますか？私のgulpファイルで何か変更する必要がありますか？

Answer 1

https://www.npmjs.com/package/sass-module-importer

をインストールする必要がありますを見ることができますgulpファイル内のcssファイルのコピーを作成します。最も簡単な解決策は、sass-module-importerを含めることでした。 gulpファイルは、最終的な解決策で以下に更新されています。

Answer 2

あなたは.scssファイルは*が、あなたのgulpjsのconfig.input.sassでいます。ファイル形式が間違っている可能性があります。

私はコンパスを使用して、それはこれが私の実施例である。この

gulp.task('compass', function() { 
    gulp.src(inputDir+'/*.'+fileType) 
     .pipe(compass({ 
      css: outputDir, 
      sass: inputDir, 
      sourcemap: true 
     })) 
     .pipe(gulp.dest(outputDir)) 
     .pipe(connect.reload()); 
}); 

のように見えます。あなたは、生成されたmain.css.map あなたは問題が、我々はmain.scssファイルに一緒にSASSとCSSファイルをインポートし、どのようにしなければならなかった https://www.npmjs.com/package/gulp-sass https://www.npmjs.com/package/gulp-sourcemaps