問題タブ [grunt-contrib-less]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
less - Chrome DevTools と互換性のあるソース マップを生成するように grunt-contrib-less を構成する方法は?
質問のタイトルがすべてを物語っています。ソース マップをサポートするようになったgrunt-contrib-lessタスクの構成方法がわかりません。私の予想される結果は、Chrome DevTools CSS インスペクターが Less ルールを指すようにすることです。可能であれば、ソース マップを同じ出力 CSS ファイルにインライン化して、別のソース マップ ファイルでワークスペースが乱雑にならないようにすることが理想的です。
ありがとう
less - より少ないファイルで Chrome 開発者ツールで作業することは可能ですか?
Oxid eshop のモバイル テーマに取り組んでいます。Chrome 開発者ツールを使用できるように、より少ないファイルをソースマップと一緒にコンパイルするための grunt 構成をセットアップするのが困難です。grunt および npm モジュールの最新バージョンがあります。テスト用の私の Weserver は、Windows7 の XAMPP です。
ファイル構成(該当部分のみ)
out
-mobile
--src
---css
---less
ご覧のとおり、魔法は out/mobile/src/less と out/mobile/src/css で発生します。
私の Gruntfile.js: 少ない部分は次のようになります。
どちらが機能しますか:cssとsouremap.css.mapを出力します
生成されたcssファイルの最後に
それは私には大丈夫に見えます
sourcemap ファイルのファイルパスは次のようになります。
これも大丈夫そうです。
現在、chrome devtools (chromium 31、Chrome 32) ファイルは、これまでのところ悪くない css ではなく、.less ファイルとして表示されます。それでもファイル名にカーソルを合わせると、パスは正しくありませんが、次のようになります。
ご覧のとおり、css パスへのより少ないパスを広告しますが、もちろん機能しません。
私は何が欠けていますか?正しいパスを持つ方法はありますか?それとも grunt-contrib-less /Chrome dev-tools はこれに対応していませんか?
ここのコミュニティからのアイデアをお待ちしています。ありがとうございました。
css - ソースの Less ファイルを非公開フォルダーに置き、CSS (そのソースマップ) を公開するにはどうすればよいですか?
Less ファイルを CSS に処理するために Grunt (grunt-contrib-less) を使用しています。これは機能していますが、ソースマップは機能していません。
私の Less ファイルは に/assets/less
あり、Grunt はそれらを にコンパイルします/public/css
。
/public/
は、インターネット上で公開されている私のフォルダーです。私のソースLessファイルが公的にアクセス可能なフォルダーにない場合でも、ソースマップを機能させる方法があると思います。しかし、私は例を見つけていません。
私のうなり声のない構成は次のとおりです。
css - 変数の中にあるにもかかわらず、@brand-success が定義されていないことについての不平は少なくなります。
less をコンパイルしようとすると、行方不明のNameError: variable @brand-success is undefined in app/static/css/less/style.less on line 131, column 15:
. ただし、app/bower_components/bootstrap/less/variables.less
によってインポートされるのは'app/bower_components/bootstrap/less/bootstrap.less'
.
使用grunt-contrib-less
してコンパイルすると、次のように表示されます。
私が持っているので、それが引っ張られていることを確認しました'app/bower_components/bootstrap/less/bootstrap.less'
:
そして、パスを意図的に間違ったものに変更すると、文句を言うでしょう。だから、私はそれがbootstrap.lessを拾っていることを知っています。
誰がこれを引き起こしているのか知っていますか?
ここにいくつかの詳細情報があります:
javascript - grunt-contrib-less の代替?
一連の .less ファイルをコンパイルし、その過程で個々のソース マップを生成しようとしています。現在、約 20 個のソース ファイルがあるため、動的拡張を使用してそれらをすべて読み込みます。
次に、ファイルを css にコンパイルし (動作)、それぞれに対して個別のソース マップを生成します (動作しません)。
ソース マッピングを機能させるのは最初は難しいようですが、複数の個別の ファイルに対してはまったく機能しないようです。
では、簡単なスナップインの代替手段を知っている人はいますか? そうでない場合、私の次の解決策は、シェルを試してネイティブにlesscを呼び出すことですが、それを避けることができれば、むしろしたくありません。
編集:これは開発と本番の両方に使用されます
gruntjs - grunt-contrib-less インポートがコンパイルされないようにする
grunt-contrib-less がアンダースコアを持つファイルをコンパイルするのを防ぐ方法はありますか?
メインファイルにインポートされている一連のファイルがあります。インポートされたファイルにはアンダースコア@import "_fileone"
がプレフィックスとして付けられていますが、ダイナミック マッピングで grunt を使用しているため、すべての .less ファイルがコンパイルされていますが、メイン ファイルのみに関心があります。