1

gulp-sassSCSS をコンパイルするために使用しgulp-sourcemaps、開発環境でソースマップを生成するために使用しています。

...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({ 
  outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...

ソースマップが生成されますが、問題はありません。Chrome DevTools で要素を検査すると、ソースの SASS 定義が表示されますが、属性値または選択を変更するとすぐにソースマップが失われ、コンパイルされた CSS の行が表示されます。スクリーンショットを見る:

プレインタラクション

インタラクション後

非常に煩わしく、私たちが試したものはこれを修正しませんでした. 助言がありますか？Firefox では、同じ問題は見られないことに注意してください。

4

1 に答える 1

1

要点: chrome devtoolsの要素検査パネル内で scss ルールのプロパティを変更することはできません。ただし、chrome ワークスペースを使用して、chrome のソース パネル内のソース ファイル (sass/scss) を編集できます。

私は同じ問題を抱えていました。問題を突き止め、ブラウザーで sass/scss を編集できるようにするために、丸一日頭を悩ませなければなりませんでした。

1.)ソースマップは、コードをデバッグできるように、ソース ファイル (sass/scss) を編集するのではなく、ソース ファイルを参照するためのものです。 つまり、コンパイルされた css ルールの原因となった正確な行を参照できますが、編集はできません。

2.) chrome は css で動作するため、scss ルールをコンパイル済みの css にすぐに置き換えることで、Chromeは正しく動作します。あなたのscssをコンパイルしません。

また、css ルールに変更を加えると、このルールはソース ファイル (.css) でも chrome ソース タブで変更されます。つまり、インスペクターで行った変更は、css ファイルに直接マップされます。

たとえば、インスペクターでプロパティを変更すると、css ソース ファイルでも変更されます。

最初は

  • 検査官

    ここに画像の説明を入力
  • ソースファイル

    ここに画像の説明を入力

プロパティの変更後

  • 検査官

    ここに画像の説明を入力
  • ソースファイル

    ここに画像の説明を入力

3.) Firefox に関しては、Firefoxの場合に動作すると考えているかもしれませんが、少し誤解を招くと思います。Firefox はどのソース ファイルでも ( css も scss も) 何も変更しないため、誤解を招く可能性があります。

  • ソース ファイルとは、Firefox の chrome およびスタイル エディターのソース パネルに存在するファイルを意味します。

4.)最後に、本当にsass/scss ファイルを chrome のソース パネルでオンザフライで編集したい場合は、 chrome ワークスペースを調べる必要があります。ただし、要素の検査タブでscssルールのプロパティを変更することはできません。

**繰り返しますが、chrome ワークスペースを使用しても、実際にはブラウザーで scss が css にコンパイルされません。実際に起こるのは、ブラウザーがファイル (ソース タブ内) をシステム ファイルにマップすることです (ブラウザーをコード エディターにするようなものです)。

于 2015-05-26T05:56:17.500 に答える