問題タブ [gulp-sourcemaps]

[修正] - 投稿の下部を参照してください

それらがサポートされていないだけなのか、それとも何か間違っているのかはわかりません。属性を囲む引用符が削除されていることに気付きました。これがどのように、またはなぜこれを行っているのかわかりませんが、これが問題を引き起こしている可能性がありますか?

この例では、部分文字列一致セレクター メソッドを使用していますが、機能しません。生成されたスタイルシートを指しています：

この例では、部分文字列一致セレクター メソッドを使用していませんが、機能します。

ワークフローに gulp を使用しています。これは SASS を処理するタスクです。

編集: Chrome 開発者ツールでデフォルト設定を復元したため、この問題は解決しました。何が原因なのか実際にはわからないので、質問を開いたままにします。

また、引用符を削除したのは要素インスペクタだけのようで、引用符は実際のソース コードにまだ存在していました。

gulp-sass と gulp-sourcemaps をインストールしましたが、node_modules にフォルダーが表示されます。

私のgulpfileはここにあります：

「gulp watch」を実行して scss ファイルを保存すると、次のエラーが表示されます。

私が間違っているアイデアはありますか？

ありがとう

SASSファイルをコンパイルして同じソースディレクトリに出力するためにgulpを取得しようとしていますが、適切に動作させることができませんでした。baseオプションを使用してみました:

上記のコードでは、アプリのルートディレクトリ、現在の作業ディレクトリに出力するだけで、これを機能させる方法はありますか? 私がそれをどのように機能させたいかの例は、ファイルを持っていて、それをandApplication/modules/frontend/static/css/main.scssにコンパイルすることです.Application/modules/frontend/static/css/main.cssApplication/modules/frontend/static/css/main.css.map

したがって、正しいディレクトリにソース マップを作成し、sourceMappingURL (正しいマップへのリンク)を css ファイルに追加し、正しい sourceRoot を css.map に書き込む gulpセットアップ(リモート サーバー)を実行しています。

ただし、要素のスタイルを確認すると、コンパイルされた css ファイルを指し続けます。(source.scss ファイルの代わりに)

これが私のディレクトリ構造です：

開発 -
| | |
| | scss -
| | |
| | main.scss 製品
-
        |
        CSS -
               |
                 main.css
                 main.min.css
                 main.min.css.map

私のソース マッピング URLは次のmain.min.cssとおりです: sourceMappingURL=main.min.css.map
ソース ルートmain.min.css.mapは次のとおりです: "sourceRoot":"../../dev/scss


"

私のページインスペクターがソースの .scss ファイルを指していない理由を知っている人はいますか? ではなく、縮小された .css をソースとして表示しますか?

だから私は次のタスクがあります：

これは正常に機能し、css ファイルの隣にマップ ファイルを生成します。css ファイルの最終行は次のとおりです。

しかし、クロムもFirefoxもそのマップファイルにロードされます。私は何か間違ったことをしていますか？または何かが機能していませんか？

同様のタスクを持つJSファイルは、devToolsのソースタブでjsを分割しますが

私が取り組んでいるプロジェクトのsourceCommentsを行ってきました.CSSで出力されるコメントは、正しいscssファイルを見つけることができ、私のコンピューターに関連するパスを示しています

例えば

これであってほしい

これが私のgulpfile.jsである場合、どうすればこれを達成できますか(ここではsass関数を示しています)

gulpfileで nodejs アプリケーションである Appiumのデバッグ環境をセットアップしています。gulp transpilebuild/lib に .js ファイルを生成するものを実行できます。ブレークポイントの設定に関しては、元の lib/*.js ソース ファイルではなく、build/lib/*.js にブレークポイントを設定する必要があります。gulp-sourcemapsをインストールし、.js.map ファイルを生成する sourcemaps を生成するタスクを作成しました。

この時点で立ち往生しています。によって生成されたファイルはgulp transpile、これらのソースマップを認識しません。//# sourceMappingURLまた、生成されたすべてのビルド ファイルを編集して、使用するたびに最後に手動で追加したくありませんgulp transpile。では、エディター (Visual Studio コード) でこれらのマップ ファイルを使用し、生成されたビルド ファイルではなく元のソースにブレークポイントを配置するにはどうすればよいでしょうか?

https://code.visualstudio.com/docs/editor/debugging#_node-debuggingを見てきましたが、私が書いたタスクを使用してgulpによって生成されたソースマップをデバッガーに使用させることはできません。

ご協力いただきありがとうございます！