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

— 麦克风
source

你把这个整理好了吗？或者您对此有其他选择吗？让我知道您是否发现一些东西

— Dev

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>

— 邵潘
source

因为我需要添加动态CSS文件。

— 迈克（Mike）

如果我想在带有联系表格的页面上添加style.css文件，可以请提供联系模块的src示例吗？我尝试了<css src =“ Magento_Contact :: css / styles.css” />，但是它没有用...我显然缺少了magento包含的流程。styles.css文件在module-contact / view / css /文件夹中……

— Lachezar Raychev 2016年

您好@LachezarRaychev，如果您的前端位于前端，则需要在中创建styles.css文件../view/frontend/css/style.css。对于后端，您需要在中创建styles.css文件../view/adminhtml/css/style.css。

— Thao Pham

尝试了一下，然后将＃contact-form {border：1px纯蓝色！}无效...文件位于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 2016年

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>

希望这对您有帮助！！

— 马克瓦纳吉坦
source

完成此操作后是否需要运行任何grunt命令？

— TheBlackBenzKid

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()?>">

— 麦克风
source

1

创建自定义模型

添加xml文件命名空间/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文件 命名空间/YourModule/view/frontend/web/css/custom.css

— 穆罕默德·阿波·巴达维（Mohamed Abo Badawy）
source

感谢您的回答。它为我工作。现在，使用此文件将css应用于所有页面。

— Vinay Sikarwar

您能帮我吗，现在我该如何仅在产品页面中应用它

— Vinay Sikarwar

不确定这一点，但是magento在产品页面上使用的.catalog-product-view主体类怎么样，您可以从中继承CSS属性！

— Mohamed Abo Badawy，