_module.lessと_extend.lessの違い


22

とを使用_module.lessしてテーマを拡張するのに違いはあります_extend.lessか?モジュール/テーマを拡張するときのベストプラクティスは何ですか?

私が最初に考えたのは_module.less、新しいモジュールをスタイリングするとき、および_extend.lessモジュールを拡張するときに使用する方が良いということでした。しかし、Lumaは_module.less、空白のテーマを拡張するときに、理論が窓から外れるようにするために使用します。

それらの間で私が見ることができる唯一の違い_module.lessは、レスポンシブライブラリの前にインポートされることと_theme.less、as _extend.lessがそれらの後にインポートされることです。

これがインポートされる順序です vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

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

回答:


20

答えはMagentoのドキュメントにいくらか隠されています:

_extend.lessを使用してテーマを拡張することは、親テーマのすべてに満足しているが、さらにスタイルを追加したい場合の最も簡単なオプションです。

詳細はこちら

使用_module.lessあなたがモジュールとの使用のためのスタイルに大きな変化行いたい_extend.lessマイナー調整のために。上記のリンクでコンポーネントスタイルをオーバーライドする方法の例がさらに見つかります。


1
私はそれを読んだことがありますが、それは本当に理由を説明していない、それの背後にある理由がないように聞こえます。私は違いがあるかどうかを把握しようとしています。「マゼントはそう言った」ので、何かを使用するよりも一貫性を好むので、私はすべての変更に_extend.lessを使用しています。
ベン・クルック

1
@BenCrook過去数日間の私の読書が私に役立つなら、いいえ。.less親のテーマ/モジュール内のファイルと同じパスを持つ誰かが自分のテーマにファイルを追加した場合、それはオーバーライドです。おそらく、テーマに空の_module.lessを作成し、元のスタイルが適用されるかどうかを確認することで確認できます。
ダレンフェルトン

1
後はphp bin/magento setup:static-content:deploy、あなたがに見ることができるpub/static/frontend/<vendor>/<themeName>/<locale>/css/pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/し、あなたのテーマ、またはそれから来ているモジュール/親テーマのいずれかに* .lessファイルのシンボリック・リンクが存在します。
ダレンフェルトン

1
それは正しい_module.lessが親レスファイルを上書きするため、継承もマージもありません。私は元の答えでそれをより明確にしたかもしれないことを理解しています:)
c.norin

1
@MattCosentinoこの返信は非常に遅れることに気付きましたが、誰かがつまずいた場合のためにここに残しておきます。_extends.lessと_extend.lessの違いに注意してください。_extend.lessファイルを任意のモジュールコンテキストに追加して、親テーマからスタイルを拡張できます。_extends.lessはテーマのルートにあり、既存のユーティリティを拡張するために使用されます(<project> /lib/web/css/docs/source/_utilities.lessを参照)。
c.norin

3

簡単な説明または両方の違い:

_extend.less親テーマのスタイルを拡張/変更する方法です。たとえば、親テーマLumaに満足しており、カスタムテーマのボタンスタイルを変更したい場合は、カスタムテーマの_buttons_extend.lessweb/css/sourceに新しいファイルを作成するだけです。そこにスタイルを調整します。このファイルを_extend.lessテーマディレクトリ内のファイルに追加して登録します。

チェックアウトモジュールなどのモジュールのスタイルを拡張する場合は_extend.less、テーマモジュールフォルダー内にファイルを作成し、Magento_Checkout/web/css/source/_extend.lessそこにモジュールスタイリングを追加/拡張できます。

_module.lessモジュールディレクトリ内にファイルを追加Magento_Checkout/web/css/source/_module.lessした場合、このモジュールの親テーマスタイルをオーバーライドする予定です。その場合_module.less、親テーマのモジュールディレクトリから「」ファイルをコピーし、そのファイルに変更を加える必要があります。親テーマ_module.lessファイルをすべて置き換えます。


彼は親としてルマについて決して話していません。
エゼキエルアルバ

1

_extends.lessブランクテーマ内の最後のSと、彼らは経由して拡張することができ、すべてのクラス作成されたファイルでLESSスタイルの変更のための新しいコンポーネントやモジュール構造を作成する必要がなく、テーマの中にそれ以降。- >私を信じない人のために:https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.lessをチェックファイル。

_extend.less最後にSなしに、あなたは親テーマがあり、あなただけの、物事のカップルを変更するいくつかのスタイルを変更するために必要なもので、99%の満足しているときのためのものであり、それはこれだけです。

私の個人的な意見である後者については、あなた自身の開発には使用しないでください。後で大きな混乱を引き起こします。_module.lessカスタマイズしたいモジュールごとに構造をモジュール化しておくと、最終的にはより良い結果と保守可能なプロジェクトが得られます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.