質問編集履歴

2

tamaru

tamaru score 9

2017/01/18 11:55  投稿

chromeでSASSのソースマップを確認することができない
###sassのソースマップを表示させたい
Gulp sassを作ってcssソースマップを作っています
###該当のソースコード
gulp.task("sass",function(){
 gulp.src("*scss")
   .pipe(sourcemaps.init())
   .pipe(sass())
   .pipe(autoprefixer())
   .pipe(sourcemaps.write("./"))
   .pipe(gulp.dest("./"))
   .pipe(browser.reload({stream:true}));
});
index.php
style.css
style.css.map
すべて一番上の階層で作成しています。
ソースマップは出力されるのですが、charomeのデベロッパーツールで見てもcssしか表示されません。devツールEnable CSS source mapsはチェック入っています。
どのようにすれば見られるか、どなたか教えてください。
ソースマップは出力されるのですが、charomeのデベロッパーツールで見てもcssしか表示されません。デベロッパーツールのEnable CSS source mapsはチェック入っています。
どのようにすれば見られるか、どなたか教えてください。
  • CSS

    9885 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    494 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • gulp

    402 questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1 フォルダ階層追加

tamaru

tamaru score 9

2017/01/17 16:12  投稿

chromeでSASSのソースマップを確認することができない
###sassのソースマップを表示させたい
Gulp sassを作ってcssソースマップを作っています
###該当のソースコード
gulp.task("sass",function(){
 gulp.src("*scss")
   .pipe(sourcemaps.init())
   .pipe(sass())
   .pipe(autoprefixer())
   .pipe(sourcemaps.write("./"))
   .pipe(gulp.dest("./"))
   .pipe(browser.reload({stream:true}));
});
 
index.php  
style.css  
style.css.map  
すべて一番上の階層で作成しています。  
 
ソースマップは出力されるのですが、charomeのデベロッパーツールで見てもcssしか表示されません。devツールEnable CSS source mapsはチェック入っています。
どのようにすれば見られるか、どなたか教えてください。
  • CSS

    9885 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    494 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

  • gulp

    402 questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る