_theme.less の変数が少ない場合の問題

https://magento.stackexchange.com/questions/112855

29-09-2020
|

質問

カスタム _theme.less で以下のメディアクエリを使用します。

& when (@media-common = true) { }

しかし、このコマンドを実行すると bin/magento setup:static-content:deploy 変数を取得します @media-common is undefined in file この場合何が間違っているのでしょうか？grunt を使用すると、エラーは発生せずにコンパイルされます。

解決

@fefe @media-common 変数は、最初は次のいずれかに設定されます。

vendor/magento/theme-frontend-blank/web/css/styles-m.less
vendor/magento/theme-frontend-blank/web/css/styles-l.less

これはもし空白テーマまたは Luma テーマのいずれかを親として使用しています。もしそうなら、これはあなたにも当てはまります。そうでない場合は、親テーマが何であれ、この変数の宣言と初期化が必要です...または、使用している親テーマがその親に対して別のテーマを呼び出している場合も、同じことが当てはまります。

を見てください。 styles-m.less そして styles-l.less ファイルを参照して、インポートされるファイルの順序を確認します。次の場所に何らかの形式のログを追加することもできます。 \Less_Parser::parseFile().

これを回避する方法は、Less 参照インポートを使用することです。ドキュメントの削減:参照インポートオプション, 、それはない上記 Less ファイル内のコードを取り込むと、インポートを要求しているファイルのスコープ内でファイルが利用可能になるだけです。

カスタム Less ファイルの先頭にインポートしたものの例:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

*ここで使用しているパスは、最終的なカスタムテーマのカスタム Less ファイルパスとの相対パスであることに注意してください。 var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ パス。

私のカスタムテーマのディレクトリ階層は次のようになります。 app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

インポートしたいファイルは次のとおりです。

var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less
var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

インポートを実行するカスタムファイルは、最終的にここに存在します。

var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

さて、以上を述べましたが、ここがキッカーです。実際にこれを行う必要はありません。なぜ？そうですね、CSS スタイルは CSS ガード, 、この場合 @media-common = true で呼び出すことだけが意図されています styles-m.less ファイル？はい、M2 はモバイルファーストであると想定されているため、 styles-m.less ファイルは、実際に含まれている唯一のファイルです（電子メールのファイルをいくつか保存し、他にもいくつかのファイルがあると思います）。 @media-common に設定 true (そして、この変数、ピリオドを設定するファイルはほんの少数しかありません)。

したがって、次の条件を持つ CSS ガード内にあるものはすべて、 @media-common = true は、次の場合を除いて常に実行されることを意図しています。 styles-l.less ファイルが呼び出されます。 styles-l.less セット @media-common に false として styles-m.less ファイルにはこれらの「共通」スタイルがすでに読み込まれているはずです...そして、あなたが調べてみると vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml あなたはそれを見るでしょう styles-m.css (これはから生成されます styles-m.less まだ生成されていない場合開発ドキュメント:.less 検索への .css リクエスト - もっとここ) がロードされる前に styles-l.css.

これは、次のように定義することで文字通りそのエラーを回避できることを意味します。 @media-common: true; カスタム Less ファイルの先頭にあり、上で説明したこととこれまでのコードの理解に基づいて、エラーは解決されるはずです。

問題は次のとおりです。 を含めるかどうか source/lib/_responsive.less & source/lib/variables/_responsive.less ファイルまたは独自の定義 @media-common: true; カスタムファイルの先頭にある @media-common: false; での割り当て styles-l.less, したがって、両方でコードの重複が発生します。 styles-m.less そして styles-l.less. 。現時点ではそれを回避する方法は見当たりません。この根本的な問題は、カスタム Less ファイルがロードされていないことです。後両方 styles-m.less そして styles-l.less あるいは、 @media-common 変数の値がカスタム Less ファイルのスコープに取り込まれていません。カスタム Less を経由してインポートしている場合、これは当てはまりません。 _extend.less 両方のファイルの最後に次のものがあるため、ドキュメントが推奨するファイルです。 styles-m.less そして styles-l.less:

//@magento_import 'source/_extend.less';

これにより、問題に対する洞察と即時の解決策が得られたことを願っています。

あなたや他の誰かがより良い解決策を思い付いたら、私は大歓迎です。

アップデート したがって、コードの重複に関して上で述べたことは無視してください。私の場合、ページにカスタムCSSの明示的なインクルードを追加していました そして カスタムのlessファイルもテーマに追加しました _extend.less.

改造していた app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml 以下を含めます。

<head>  <css src="css/pages/homepage.css" /> </head>

そして私もエントリーしてました app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less の：

@import "../pages/homepage.less";

私が発見したのは、両方ではなく、どちらかであるということです。したがって、この場合、M2 が次のリクエストを処理しようとしたとき、 http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css 適切なファイルをロードします homepage.less このファイルには存在しません @media-common スコープ内にあるため、エラーがそれを示していました。これを回避するには、上で述べたようにインポート参照を追加すると、コードの重複がなくなります。さらに、エントリを削除すると、 _extend.less 私の styles-m.less そして styles-l.less 探さないでしょう homepage.less ファイルに含まれており、コードの重複はありません。

ここでの例はホームページ固有のスタイルのものです...しかし、これはシステムを正しく使用していない状況を示しており、それがエラーが発生した理由です。これがお役に立てば幸いです

ライセンス： CC-BY-SA と帰属

所属していません magento.stackexchange