今週の大半は、magento-blankテーマ全体をコピーすることなく、カスタムテーマを適切に作成し、既存のLESS / CSSを拡張する方法に関する明確なガイドを見つけるために費やしました。
公式ドキュメントでは、変数のオーバーライドの基本を説明していますが、その使用方法は限られています。たとえばSonassiのような既存のガイドは、Magento 2のベータリリースに基づいているようです。
Magento 1から、LESSがどのように機能し、MagentoがすべてのファイルをCSSに収集する方法を理解するための学習曲線が少しありました。ガイドの一部を掘り下げて、どのファイルを変更するのか、いつ、そして見つけたものを共有するのかを明確な答えを得るのに時間がかかりましたので、将来のユーザー（および将来の私）がLESS Magento 2。
回答:
注1：これは常にあなたが拡張してmagento-blankいると仮定します。
注2：<theme-dir>はapp/design/frontend/Vendor/theme/
（tl; drの場合、結論にスキップします）
私が見つけたほとんどのガイドは、LESSを使用したテーマ設定のこのステップのみをカバーしているため、これを短くするようにします。Magento 2には、テーマで一般的に使用される側面を定義する変数の基本セットがあります。色、フォント、ページタイトルのスタイルなどは、これらの変数で定義されます。
では<magento-root>/lib/web/css/source/lib/variables/、あなた直感的に名前のLESSファイルの数があります。これらのそれぞれで、Magento 2の多くの共通要素の変数に割り当てられた値を見つけることができます。
これらの変数を変更するには、単にファイルを作成します<theme-dir>/web/css/source/_theme.less。
例：
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);技術的には、ここに任意のCSSまたはLESSを配置でき、サイトに正常に適用されます（ただし、これは行わないでください）。これがどのように機能するかをすぐに説明します。
すべてのテンプレートページの先頭に新しいCSSを追加できます。
作成<theme-dir>/Magento_Theme/layout/default_head_blocks.xml：
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>次に、新しいCSSまたはLESSを使用してファイルを作成します。
<theme-dir>/web/css/myStyle.less。ここでLESSまたはCSSを記述できます。
Magento 2 LESSは、新しいCSSファイルを追加するだけでは簡単に置き換えられないことがわかりました。これが私が迷子になり始めた場所であり、Magento 2がLESSファイルを見つける方法を説明します。
デフォルトでは、Magento 2には次のファイルが含まれます（最終的にフォールバックします）。
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Stylesこれらのファイルには、他のLESSファイルが含まれます（インポートされます）。そして、これは他のガイドが私にとって役に立たなくなった場所であり、私は最善を尽くして見つけたものを説明します。
styles-m.lessラインがあります：@import 'source/lib/_responsive.less';。テーマにsource/libディレクトリがないことがわかりますmagento-blank。Magento 2スタイルが最終的ににフォールバックすることは明らかです<magento-root>/lib/web/css/。そこにありますsource/lib/_responsive.less。
使用する変数は、テーマにインポートされ_theme.lessたsource/libファイルのために利用可能ですmagento-blank。注： _theme.lessはデフォルトのテーマの空のファイルです。読み続けると、これが重要である理由がわかります。
私が見つけたいくつかのガイドは<theme-dir>/web/css/_styles.less、Magentoがそのファイルを自動的に検索してインクルードするため、作成できると主張しました。これは悪いアドバイスだと思いました。
を作成する<theme-dir>/web/css/_styles.lessと、サイトが破損します。theme-frontend-blank/web/css/styles-m.lessimportsは_styles.less、さらに3つの.lessファイルをインポートし、それぞれがさらに.lessファイルをインポートします。
を作成する場合_styles.less、それをオーバーライドします。をオーバーライドすると_styles.less、インポートするすべてのファイル、およびそれらのファイルがインポートするすべてのファイルなどがオーバーライドされます。
注_theme.less：このファイルはデフォルトのテーマでは空なので、デフォルトに基づいてテーマを作成している場合は、作成して追加を開始しても安全です。ただし、既にデフォルトを拡張しているテーマを拡張する場合は、チャンスが_theme.lessすでに使用されています。再度作成すると、上書きされます。
ではstyles-m.less、あなたコメントアウト数行が表示されます。
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgetsこれらの行は実際にはコメントアウトされていません！Magento 2には、で始まる行に対して特別な処理があり//@magento_importます。これらの行は、のファイルにのみ含めることができます<theme-dir>/web/css。
上記の行は、Magento 2に指定されたパターンに従うテーマ内のファイルを含めるように指示します。したがって、上記の行には自動的に含まれます：
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so onファイル名を追加する_widgets.lessと_module.less します自動的に、発見し、含まれる場合でも、その新しいモジュールまたはすでにそのファイルを持っていないモジュール。
Magento-Blankにはほとんどのモジュールのこれらのファイルが含まれていることに注意してください。この方法を使用する場合は、元のファイルをコピーして貼り付ける必要があります（完全に書き直す場合を除く）。
（読む：使用しないでください_styles.less）。
要素のCSSを変更する場合、そのスタイルが定義されているファイルを見つけるために最善を尽くす必要があります。必要なのは、の変数を変更することだけです_theme.less。ほとんどの場合、私はあなたのテーマに_module.lessまたはをコピーして貼り付け_widgets.less、変更を加えるだけでよいと思います。
新しいモジュールを作成した場合、または新しいHTML要素を使用した場合は、LESSファイルを作成して<head>、すべてのページに個別に含める必要があります。
複雑な場合は、新しい@importまたはを作成する必要があります@magento_import。自分がしていることに意味のある最下位の子を見つけたいので、不必要なファイルをコピーして貼り付けたり、@importどこにも行かないように見える混乱した行を追加したりしません。
var/view_preprocessed/css/frontend/VENDOR/THEME/loca_LE/css/*CSSのために再生成される
_extend.less