Magento 2-カスタムcssファイルをヘッドに追加する方法

8

Magento 1.xでは、以下のコードのようなヘルパーを使用してCSSファイルをヘッドに追加できます。

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Magento 2でこれを行う方法を知っている人はいますか？

magento2 layout xml

— マイク
ソース

これを整理しましたか？またはあなたはこれについて何か代替案を持っていますか？何か見つけた場合はお知らせください

— 開発者2016

1

申し訳ありませんが、私にはまだ解決策がありません。今、私はこのコード<link rel = "stylesheet" type = "text / css" media = "all" href = "<？php echo $ _helper-> getCSSFile（）？>">を "after.body.startに追加しました"コンテナ。

— マイク、

私は解決策を見つけました、以下の答えを確認してください。

— マイク・

9

ヘルパーは必要ありません。レイアウトで以下のコードを使用できます。

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>

— タオ・ファム
ソース

動的なCSSファイルを追加する必要があるためです。

— Mike

お問い合わせフォームのあるページにstyle.cssファイルを追加したい場合、連絡モジュールのsrcサンプルを提供できますか？<css src = "Magento_Contact :: css / styles.css" />を試しましたが、うまくいきませんでした... magentoのインクルードのフローが見当たらないようです。styles.cssファイルはmodule-contact / view / css /フォルダーにあります...

— Lachezar Raychev

こんにちは@LachezarRaychevです。フロントエンドのハンドルの場合、でstyles.cssファイルを作成する必要があります../view/frontend/css/style.css。バックエンドでは、でstyles.cssファイルを作成する必要があります../view/adminhtml/css/style.css。

— Thao Pham 2016

それを試して、＃contact-form {border：1px solid blue！important; }が機能しませんでした...ファイルはview / frontend / css / styles.cssにあり、<css src = "Magento_Contact :: css / styles.css" />は<head> </ head>のcontact_index_index.xmlにあります本当に奇妙な形の周りの要素....何の青い枠ません... ..

— Lachezar Raychev

Nvm ... static / frontend / Magento / luma / sv_SEにMagento_Contactフォルダーを作成し、内部にcss /フォルダーを作成し、内部にstyles.cssファイルを配置する必要がありました。私はその方法で、module-contact / view / frontend / css /フォルダー内のファイルフォームをインポートすると思っていました...

— Lachezar Raychev

8

この手順を試してください。

このディレクトリの下にcssファイルを作成します。 app / design / frontend / Vendor / theme / web / css / customcss.css
このパスに存在しない場合はdefault_head_blocks.xmlファイルを作成しますapp / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

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>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />
    </head>
</page>

これがあなたに役立つことを願っています!!

— マクワナケタン
ソース

これを実行した後に、不快なコマンドを実行する必要がありますか？

— TheBlackBenzKid 2016年

1

CSSファイル名は動的です。今、私はこのコード<link rel = "stylesheet" type = "text / css" media = "all" href = "<？php echo $ _helper-> getCSSFile（）？>">を "after.body.startに追加しました"コンテナ、このコードを<head>に追加するにはどうすればよいですか？

— マイク

6

私は自分で解決策を見つけました。

レイアウトxmlファイル。

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="custom_head.phtml" />
        </referenceContainer>
    </body>
</page>

custom_head.phtmlファイル内

<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">

— マイク
ソース

1

カスタムモデルを作成する

XMLファイルNamespace / YourModule / view / frontend / layout / default_head_blocks.xmlを追加します

このファイルは、ページ構成を使用してヘッドレイアウトを変更しますhttp://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

ファイル内容の例

<?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="Namespace_YourModule::css/custom.css" />
    </head>
</page>

次に、このパスにcssファイルを追加します Namespace / YourModule / view / frontend / web / css / custom.css

— モハメド・アボ・バダウィ
ソース

答えてくれてありがとう。それは私のために働いた。このファイルを使用するすべてのページにcssが適用されます。

— Vinay Sikarwar 2017年

製品ページでのみ適用できるようになりました

— Vinay Sikarwar

これについてはわかりませんが、magentoが製品ページで使用する.catalog-product-viewボディクラスは、CSSプロパティを継承できますか？

— Mohamed Abo Badawy 2017年