1

Oxid eshop のモバイル テーマに取り組んでいます。Chrome 開発者ツールを使用できるように、より少ないファイルをソースマップと一緒にコンパイルするための grunt 構成をセットアップするのが困難です。grunt および npm モジュールの最新バージョンがあります。テスト用の私の Weserver は、Windows7 の XAMPP です。

ファイル構成（該当部分のみ）

out
-mobile
--src
---css
---less

ご覧のとおり、魔法は out/mobile/src/less と out/mobile/src/css で発生します。

私の Gruntfile.js: 少ない部分は次のようになります。

// Compile specified less files
        less: {
            compile: {
                options: {
                    // These paths are searched for @imports
                    paths: ["out/mobile/src/less"],
                    sourceMap: true,
                    sourceMapFilename: 'out/mobile/src/css/oxid.css.map',
                    sourceMapBasepath: 'out/mobile/src/css',
                },

                files: {
                    // target.css file: source.less file
                    "out/mobile/src/css/oxid.css": "out/mobile/src/less/oxid.less"
                }
            }
        },

どちらが機能しますか:cssとsouremap.css.mapを出力します

生成されたcssファイルの最後に

 /*# sourceMappingURL=oxid.css.map */

それは私には大丈夫に見えます

sourcemap ファイルのファイルパスは次のようになります。

out/mobile/src/less/custom.less

これも大丈夫そうです。

現在、chrome devtools (chromium 31、Chrome 32) ファイルは、これまでのところ悪くない css ではなく、.less ファイルとして表示されます。それでもファイル名にカーソルを合わせると、パスは正しくありませんが、次のようになります。

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

ご覧のとおり、css パスへのより少ないパスを広告しますが、もちろん機能しません。

私は何が欠けていますか？正しいパスを持つ方法はありますか？それとも grunt-contrib-less /Chrome dev-tools はこれに対応していませんか?

ここのコミュニティからのアイデアをお待ちしています。ありがとうございました。

4

1 に答える 1

1

私は同じ問題を抱えていて、少し掘り下げた後に理解しました。

ここに問題があります: Chrome は実際には、実際のディレクトリがどこにあるかを認識していません。あなたははっきりと言うべきです

OK Chrome はディレクトリです:

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

このサーバーパスが何を意味するのかわかりません。探すべきパスは次のとおりです。

c:\out\mobile\src\less\custom.less"

これを行うには、less フォルダーをワークスペースに追加する必要があります。ソースタブに移動し、次のようなディレクトリを見つけてcss/out/mobile/src...右クリックし、 をクリックしますadd to the workspace。その後、少ないファイルの1つを右クリックしてクリックするmap to the file system resourceと完了です。Chrome が認識できない場合があるため、ページを数回更新する必要があるかもしれません。

完全なチュートリアルは次のとおりです: http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

手順 1 ～ 4 を正しく実行しているかどうかを確認してください。

于 2014-07-11T22:18:15.147 に答える