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

— Майк
источник

ты разобрался с этим? или у вас есть альтернатива по этому вопросу. дайте мне знать, если вы найдете что-нибудь

— 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>

— Тао Фам
источник

Потому что мне нужно добавить динамический файл CSS.

— Майк

Можете ли вы предоставить пример src для контактного модуля, если я хочу добавить файл style.css на страницу с контактной формой? Я попытался <css src = "Magento_Contact :: css / styles.css" />, но это не сработало ... Я пропускаю поток включений magento, по-видимому. Файл styles.css находится в папке module-contact / view / css / ...

— Лачезар Райчев

Здравствуйте @LachezarRaychev, если ваш дескриптор во внешнем интерфейсе, вам нужно создать styles.cssфайл в ../view/frontend/css/style.css. С бэкэндом вам нужно создать styles.cssфайл в ../view/adminhtml/css/style.css.

— Тао Фам

попробовал это и поместил # contact-form {border: 1px сплошной синий! важный; } не работает ... файл находится в представлении / frontend / css / styles.css и <css src = "Magento_Contact :: css / styles.css" /> находится в contact_index_index.xml в <head> </ head> элемент .... нет синей границы вокруг формы ... действительно странно ..

— Лачезар Райчев

Нвм ... мне нужно было создать папку Magento_Contact в static / frontend / Magento / luma / sv_SE и внутри создать папку css /, а внутри поместить файл styles.css ... теперь это работает. Я просто думал, что таким образом он будет импортировать форму файла внутри папки module-contact / view / frontend / css / ...

— Лачезар Райчев

8

Попробуйте это шаги.

Создайте файл CSS в этом каталоге. приложение / дизайн / интерфейс / Vendor / тема / 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

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 / 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

— Мохамед Або Бадави
источник

Спасибо за ответ. Это сработало для меня. Теперь CSS применяется ко всем страницам, использующим этот файл.

— Винай Сикарвар

Можете ли вы помочь мне, как я могу применить его только на странице продукта

— Vinay Sikarwar

Не уверен в этом, но как насчет класса тела .catalog-product-view, который magento использует на странице продуктов, вы можете наследовать от него свойства CSS!

— Мохамед Або Бадави,