Magento 2でカスタムCSSファイルを追加する方法

カスケードの最後にロードする独自のCSSファイルを作成する方法はありますか？

もしそうなら、どのように、どこでカスタムCSSファイルを追加しますか？

magento2 css

回答:

カスタムCSSを追加して最後にロードするには、カスタムテーマを設定する必要があります。

テーマの作成：http : //devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Magentoアプリケーションを開発者モードに設定していることを確認してください。
次のフォルダーをカスタムテーマに追加します

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

次のファイルを作成します。

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

このコードをdefault_head_blocks.xml内に配置します

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

テーマを適用します：http : //devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
静的リソースを展開します（SSHをmagentoルートに）：

php bin/magento setup:static-content:deploy

— ジョシュア34
ソース

こんにちは、私はちょうどそうしましたが、追加したcssファイルは読み込まれず、ページを検査すると、ファイルのGETエラーが表示され、500（内部サーバーエラー）が表示されます。かもしれない？

— alexcr

デプロイするCLIコマンド：php bin / magento setup：static-content：deploy

— Joshua34

作成した2つの新しいCSSファイルに何を入れるべきですか？純粋なCSSですか??

— styzzz

@styzzzはい、生のcssは大丈夫です。

— ジョシュア34

うん。local-m.cssおよびlocal-l.cssファイルをweb / cssにアップロードしました。キャッシュをクリアし、php bin / magento setup：static-content：deployを実行しました。開発者モードです。まだ拾っていない。私のdefault_head_blocks.xmlは上記とまったく同じです。しかし、CSSで設定したこれらのstypesはまだ使用されていません

— -styzzz

カスタムcssを追加して最後にロードするには

ディレクトリ構造に従う

アプリ/コード/ベンダー/モジュール名/ビュー/フロントエンド（admin adminhtml用）/ web / css / filename.css
以下に示すように、CSSファイルパスを対応するレイアウトファイルに追加します
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— マニッシュ
ソース

含むことVendor_Moduleは私にとってはうまくいきません。それを削除すると正常に動作します。

— サラバナンDS

@SaravananDSは、パッケージとモジュール名に置き換える必要があります。

— マニッシュ

はい。カスタムVendor_Moduleのみに置き換えた後は機能しません。

— サラバナンDS

@Manish、カスタムCSSファイルを検索結果ページにのみロードできますか？

— ジャファーピンジャー

ここでは、child-themeを使用する必要はありませんか？

— HaFiz Umer

magento 2がヘッドセクションのcssの最後に配置するメディア属性を追加できます。幅を1pxに設定すると、すべてのデバイスで有効になります。

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
ソース

ありがとう、あなたは私の一日を救った。ddintは.lessファイルを操作し、編集するたびにコンパイルしたいです。

— bourax

ここで最初にカスタムテーマを作成する必要はありませんか？

— HaFiz Umer

@HaFizUmer最初にカスタムテーマを作成する必要があります。受け入れられた回答の指示に従い、ここに示す方法を使用します。

— Cypher909