Magento 2でCSSファイルを配置/順序付ける適切な方法は何ですか？

13

CSSファイルを含めるには、レイアウトファイルの<head>セクションに<css src = "<path> / <file>" media = "print | <option>" />ブロックを追加します。

ただし、CSSファイルの順序にどのように影響を与えることができるかについては述べていません。そして、親テーマを持つカスタムテーマにこの方法でCSSファイルを追加すると、ファイルは<head>セクションの一番上に追加され、その下に他の多くのCSSファイルが追加されます。低く、親テーマまたは拡張機能のルールを簡単にオーバーライドすることはできません。

Magento 1にも同様の問題があり、回避策がありました。きれいな人もいれば、そうでない人もいた。
Magento 2の<head>の下部にあるカスタムテーマのCSSファイルを注文する最良の方法は何ですか？可能であれば、カスタムテーマのMagento 2レイアウトガイドラインに準拠していますか？

— ジェイ・ディーワーク
ソース

13

Magento2にはこのためのメカニズムが組み込まれていないため、最初のMagento2拡張機能を作成する機会として扱うことにしました。Quickshiftin \ Assetorderer拡張子は GitHubの上で利用可能になりました！

拡張機能をインストールしたら、css XMLタグで順序属性を指定できます。

<head>
  <css src="css/page/home.css" order="100"/>
</head>

また、などのレイアウトXMLファイルでorder属性を使用することもできますdefault_head_blocks.xml。任意のCSSタグを使用するには、指定されていないためにのために、彼らが持っているかのように扱われる順序 1のを。

— クイックシフト
ソース

どうもありがとう。あなたの拡張機能は私のために働いた。しかし、di.xmlの問題とQuickshiftin \ Assetorderer \ View \ Asset \ Fileクラスの問題の2つの問題に直面しました。

— パンカジパリーク

こんにちは@PankajPareek、それは良いニュースであり悪いことです。GitHubについて詳しく説明し、プルリクエストを提供できる可能性はありますか？この拡張機能をすべての人にとって役立つものにするとよいでしょう！

— クイックシフト

@quickshiftinこの拡張機能はv2.0で機能しましたが、v2.1.1では機能しませんでした。ただし、v2.1.1 order="1"ではファイルを追加すると正しく順序付けられるため、v2.1.1では不要になったことを偶然発見しました。追加の属性を追加する限り、属性が何であるかは関係ありません。検証するには、に変更してdata-order="1"も機能します。

— thdoan

jsファイルの注文作業も行います。

— Jalpesh Patel

@quickshiftin M2.2.2のモジュールを更新しましたか

— PЯINCƏ18年

7

media属性をcss要素に追加できます。これにより、ヘッドに含まれるすべてのCSSの最後に追加されます。

<head>
    <css src="css/styles.css" media="all" />
</head>

— アンディアス
ソース

最初に欲しい場合はどうしますか？

— TheBlackBenzKid

これにより、メインmagento 2コアCSSファイルの前にカスタムCSSがロードされます。（

— ジョナサンマルズーロ

M2.2.1の時点で、それが唯一の解決策でした。'order = "X"'を<css>ノードに追加すると、この属性は許可されないためエラーがスローされます。

— ダイノマイト

2

私はここでは詳細に答え Magentoのは、CSSとどのように順序がシーンの後ろに起こっているのレンダリング方法について。

ここで言及する必要があるいくつかの余分なポイントは次のとおりです。

style-m.cssおよびの後にカスタムcssファイルをレンダリングする場合はstlyle-l.css、次のようにcssファイルを定義する必要があります。
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
style-m.cssおよびの前にカスタムcssファイルをロードする場合 stlyle-l.css、レイアウトxmlファイルdefault_head_blocks.xmlを介してcssファイルを含め、上記のstyle-m.cssおよびにカスタムcssファイルを追加する必要がありますstlyle-l.css。

CSSプロパティは有限であり、レイアウトスキーマで適切に定義されています。レイアウトスキーマに従って、cssファイルで次のプロパティを使用できます。

ファイル： vendor/magento/framework/View/Layout/etc/head.xsd

<xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>

これorderは、レイアウトxmlファイルでcss定義とともに他のプロパティを使用できないことを意味します。そうすることで、スキーマの検証が失敗したことを示す例外が発生します。

— ラジーエフ・K・トミー
ソース

1

親セレクターを追加または削除することにより、CSSルールをコアCSSルールよりも重要度を高くしたり低くしたりできます。
たとえば、コアのサンプルCSSルールを見てみましょう。

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

親セレクターを追加することにより、カスタムルールをより重要にすることができます。次に例を示します。

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

または

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

親セレクターを削除することにより、カスタムルールの重要性を低くすることができます。たとえば、次のとおりです。

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
ソース

3

確かに、私は単純に叩き落とすこともでき!importantます（しかし、もちろんあなたのアプローチはそれよりも優れています）、またはLESSでベンダープレフィックスクラスを実装します。それでも、これは不必要なオーバーヘッドと複雑さを追加します。CSSの単純な順序変更がそれを行うのに、なぜ数百以上のルールにプレフィックスを付けるのですか？だから私はまだ... Magentoの側でこの問題を解決するための良い方法を探しています

— Jey DWorkに

それに加えて、回避策がさらにくなる可能性があるため、CSSポジショニング以外のリソースに関しては、さらに重要になる可能性があります。

— ジェイDWork

6

それは答えではありません

— アフマドアルフィ