Chrome デバッグ SASS

ステップ 1: Sass プリコンパイルコマンドを実行する

まずプロジェクトのフォルダー構造を説明します:

->sass /css ファイルを入力します->cmd コマンドを開きます->以下に示すように sass --watch --scss test.scss:test.css を入力します:->

Sass プロジェクトに入ると、以下に示すように、さらに 2 つのファイル、test.css.map と test.css があることがわかります。

ここで生成された test.css.map は Chrome デバッグの鍵です ->

Chrome F12 開発者ツールを開く -> プロジェクト アドレスを入力して、マップのデバッグをサポートするように Chrome を設定します:

->次のステップでは、[CSS ソース マップを有効にする] チェックボックスをオンにします

->以下に示すように（写真の注意事項を確認してください）:

ソースの css/test.scss ファイルを開きます

しかし、Chrome で test.scss の内容を変更すると、以下に示すように、常に左上隅に黄色の感嘆符が表示されます。

次に、それをプロジェクト内の元の場所であるワークスペースに追加する方法を見てみましょう

-> 次に、Chrome がこのファイルの操作許可を取得するように要求します。[許可] をクリックします。ソースの下に css フォルダーがあることがわかります。そのため、

test.scss がローカルの test.scss に関連付けられます。プロジェクト

同時に、以下に示すように、エディターのコードも変更されていることにご注意ください:

言い換えれば、Chrome で test.scss を変更すると、ローカルの test.scss もそれに応じて変更されます。

デバッグ手順はほぼ完了しました。もちろん、chome ブラウザーは SASS のサポートを更新しています。おそらく、その後の設定はそれほど面倒ではないので、上記の手順はあくまで参考です。