_minicart.lessのようにweb / css / source / moduleにあまり見られないモジュールを拡張する最良の方法は?


14

それでは、<module>/web/css/source/module/たとえば、より少ないファイルのコンテンツを拡張する最良の方法はどれMagento_Checkout/web/css/source/module/_minicart.lessですか?

それを想定して

A)オーバーライド

  1. テーマ関連の少ない親テーマと同じ名前のlessを作成(またはコピー)し、次のようにテーマに配置する必要がありますtheme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
  2. モジュール固有のless親テーマと同じ名前のlessを作成(またはコピー)し、次のようにテーマに配置する必要がありますtheme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib lessライブラリライブラリフォルダーに同じ名前のコンテンツでlessを作成(またはコピー)し、次のようにテーマに入れますmagento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

そしてへ

B)延長

  1. テーマ関連の少ないテーマで _extend.lessファイルを作成し、このような名前で_extendを追加<your-theme>/web/css/source/_navigation_extend.lessして拡張し、web / css / sourceのテーマコンテンツの_extend.lessで@importディレクティブでtheme-frontend-blank/web/css/source/_navigation.lessそのファイルを登録する必要があります->@import "_navigation_extend.less"
  2. 特定のモジュール以下<your-theme>Magento_CatalogSearch/web/css/source/_extend.lessでは、Magento_CatalogSearchの元の_module.lessを拡張するこのようなテーマモジュールパスに_extend.lessファイルを作成する必要があります
  3. UI 11bが少なく、あなたが追加したフォルダ以下のライブラリに同じ名前のコンテンツとを作成する必要があります_extendを次のように名前に<your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less拡張するmagento2-base/lib/web/css/source/lib/_buttons.lessと、そのファイルを、レジスタ@importのウェブ/ CSS /ソース内のテーマコンテンツの_extend.lessで指示- >@import "lib/_buttons_extend.less"

理論では、_minicart_extend.lessを作成するように提案する必要がありますが、自動的には機能しません。B1またはB3で説明したように、そのモジュールの_extend.lessにそのファイルをインポートする必要がありますか?

また、これらのコンポーネントを拡張する正しい方法であるが、_extend.lessにインポートする必要がある場合、これらのコンポーネントは拡張が少ないため、CSSの解析に自動的に含まれません。

(ここでは別の質問も来:との違い何web/css/source/lib/_buttons.lessとはweb/css/source/_buttons.less?😕)

私は少し混乱しています。誰かが私を助けてくれることを願っています。

この長いテキストでごめんなさい。


ソース:

回答:


12

Magento 2の規則によると、モジュールスタイルを拡張する最良の方法は次のとおりです。

スタイルを拡張する場合は、Magento_Checkout/web/css/source/module/_minicart.less2つのファイルが必要です

  • <your-theme>/Magento_Checkout/web/css/source/_extend.lessカスタム拡張をインポートする場所。この場合@import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less カスタムスタイルが含まれます。

_extend.lessファイルを指定する必要がある理由@importsは、Magentoが_extend.lessモジュールごとに自動的にのみ含むためです。すべてを*_extend.less自動的にチェックして追加するのは時間がかかり、それがそのように実装されなかった理由です。

Magentoでは、ミニカートを担当する空のテーマファイルは /vendor/magento/theme-frontend-blank/Magento_Checkout/

すべてのカスタムスタイルをに直接追加することもできます_extend.less。ただし、元のモジュールのように小さい特定のファイルに分割すると、コードが明確に整理されます。これは、Magento 2標準に従って推奨される方法でもあります。


@Jalogutありがとう!そのため、「_ minicart_extend.less」を「foobar.less」として呼び出すこともできますが、_extend.lessで@importを実行することは重要なので、違いはありません。コンポーネント名に「_extendd.less」を追加することは、すべてをより明確に保つための単なる慣習です。
ロリーナ

まさにそれがアイデアです。
ジャログート

@Jalogutは、「すべての* _extend.lessを自動的にチェックして追加すると時間がかかる」と言っているのか、それともあなたの推測でしょうか?なぜなら、IMOは、開発者がカスタマイズするたびにこれを行うようにするには、もう少し時間がかかりますが、それほど多くはありません(最初は少し混乱します)
medmek
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.