Magento 2-どこでも！importantを使用せずにCSSをオーバーライドする

10

現在、クライアントのためにMagento 2サイトに取り組んでいます。私のクライアントのブランドがboofarあり、拡張/上書きしようとしているテーマがfoobar私が使用して親テーマとして設定したと仮定しますfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

次にfrontend/Foobarthemes/boofar/web/css/source/_theme.less、オーバーライドするCSSコードを記述しました。これもで試しました_extend.less。

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

私は!importantここで働くために何でも使うことを強いられます。上記のコードでは、フォントやテキストは機能しません。

Magento 2のフロントエンドワークフローを正しく理解していませんか？

magento2  theme  css  frontend  less-css 
— フランシス・キム
ソース
元のcssルールはどこにありますか？
— アーロンアレン
— Ankit Shah 2017
1
これをweb / css / custom.css（単純なcss）で更新してみてください。var/フォルダーとpub / static / content / frontend / yourtheme_package / yourtheme / en_US / remove cssフォルダーを削除して、php bin / magento setup：staticを実行してください。 -cotent：deployコマンド。
— ニト
「foobar」ではなく、theme.xmlに「foobar1」から親テーマがあります
— St3phan

回答:

8

_theme.less親テーマの_theme.lessファイルをオーバーライドする場合にのみ、ファイルにスタイルを含める必要があります。そのファイルの場合、そのうちの1つだけがロードされ、そこにファイルが存在する場合は常に選択されたテーマになります。そこから、フォールバックスキームを使用してそのファイルを見つけて使用します。

したがって、あなたの場合、_extend.lessファイルを使用するのが適切なファイルです。

_extend.lessMagentoがサイトに存在するすべてのスタイルをコンパイルするときに、ファイルに入れられるコードが最後に読み込まれるため、これは少し混乱します。だから私はロードの順番をいじる何かがあるのだろうかと思っています。

設定方法を見直し、同じテーマではなく別の名前空間にテーマを設定してみてください。Magentoがluma / blankテーマを設定しているのと同じようにテーマを設定する方法は同じであるため、これで問題が解決しない可能性があります。しかし、私が行ったすべての作業について、サードパーティのテーマまたはluma / blankから拡張されるベンダーの名前空間があります。

次に試すことは、組み込みのメディアクエリでコードをラップすることです。ここではさらに詳しく説明しますが、基本的には、スタイルがstyles-l.cssとstyles-m.cssファイルに2回読み込まれるのを防ぎます。

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

そこからは、すべてがCSSの特異性に帰着します。あなたのそれよりも高いものがある場合は、スタイルのクラス/ ID定義をより具体的にする必要があります。DOM構造の写真を投稿して、対象とする対象、および対象とする対象を乗り越えている対象を示すことができます。

— Circlesix
ソース
良い点-多分、私が使用しているテーマ（サードパーティ）は奇妙なことをしていますが、デフォルトのテーマに同じオーバーライドを行う場合、！importantを使用する必要はありません。試してみる価値はありますか？
— フランシス・キム
1
私はそう思います、あなたはregistration.php、theme.xmlとウェブフォルダだけで簡単なテーマを作成することができます。再コンパイルしてから管理で選択し、何が起こるかを確認します。何か他のことが起こっていると思っていますが、これが可能性として頭に浮かびました。
— circlesix 2017
1
また、健全性チェックと同様に、スタイルで一意の値を入力して（background-color: tomato誰もその色を使用しないので使用したい）、コンパイルされたスタイルでシートのどこにあるかを確認できます。pub/static/frontend/{package}/{theme}/en_us/css両方のスタイルファイルを探します。これがファイルの最後にない場合、デフォルトのロード順序で何かがねじ込まれています。
— circlesix 2017
4

_extend.lessファイルでスタイルを適用できる場合、これはCSSの特定性に問題があることを意味します。Magento2はコンパイルをあまり使用しないため、ほとんどのスタイルは非常に特殊です。それらをオーバーライドするには、スタイルセレクターをより具体的またはより具体的にする必要があります。たくさんの記事がオンラインで見つかるので、ここではコンセプト自体の詳細は掲載しません。

— ティミク
ソース
3

デフォルトのLESSセットアップを使用している場合は、すべてのLESSがM2 LESSメディアクエリ内に書き込まれていることを確認してください。そうしないと、CSSが重複し、おそらく特異性の問題が発生します。

これはすべて特定性とロード順序に帰着します。CSS は親テーマ（またはモジュール）の後にロードする必要があるため、これを無効にするには、特定性を満たす必要があります。

たとえば、親テーマが

.parent-selector .selector {
    ...
}

次に、同じセレクターを作成する必要があります。何らかの理由で機能しない場合は、その前に別のセレクターを追加する必要があります。簡単な方法は、すべてのセレクターをカバーして特定性を追加するため、その前にボディを追加することです。そのようです：

body .parent-selector .selector {
    ...
}

この記事には、CSSの特定性に関する優れた情報が含まれています。

または、ファイル全体を上書きすることもできます

多くのカスタマイズを行う場合は、拡張するのではなく、ファイル全体を上書きすることをお勧めします。これを行うには、同じファイルパスと名前を使用して、ファイルをテーマに追加します。

— ベン・クルーク
ソース
0

より高い優先度のために、セレクターを複製することができます： 

  .home.home {
    display: none;
  }
— ビクターSL
ソース
良いヒント！しかし、残念ながら私が求めているものではありません。
— フランシスキム
0

上書きし.lessたい親テーマの同じファイルを上書きする必要があります。たとえば、_theme.lessファイルを上書きしたい場合は、このファイルを子テーマにコピーする必要があります（親テーマのパスが同じであることを確認してください）

frontend/Foobarthemes/boofar/web/css/source/_theme.less

ここでcssをオーバーライドできます。

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