Magento 2 - Como adicionar arquivos CSS personalizados na cabeça?

8

No Magento 1.x, posso adicionar os arquivos CSS na cabeça usando o auxiliar como no código abaixo.

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

Alguém sabe como fazer isso no Magento 2?

magento2 layout xml

— Mike
fonte

você resolveu isso? ou você tem alguma alternativa nisso? deixe-me saber se você encontrar alguma

— Dev

11

desculpe, ainda não tenho solução. agora, adicionei este código <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> em "after.body.start "container.

— Mike

Encontrei a solução, verifique a resposta abaixo.

— Mike

9

Você não precisa de ajuda, pode usar este código abaixo em seu layout:

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

— Thao Pham
fonte

Porque eu preciso adicionar um arquivo css dinâmico.

— Mike

Você pode fornecer o exemplo src para o módulo de contato, se eu quiser adicionar o arquivo style.css na página com o formulário de contato? Eu tentei <css src = "Magento_Contact :: css / styles.css" /> mas não funcionou ... Estou perdendo o fluxo de magento inclui aparentemente. O arquivo styles.css está no módulo-contact / view / css / pasta ...

— Lachezar Raychev

Olá @LachezarRaychev, se você manipula o frontend, precisa criar o styles.cssarquivo ../view/frontend/css/style.css. Com o back-end, você precisa criar o styles.cssarquivo ../view/adminhtml/css/style.css.

— Thao Pham

tentei e coloquei # contact-form {border: 1px solid blue! important; } não funcionou ... o arquivo está em view / frontend / css / styles.css e <css src = "Magento_Contact :: css / styles.css" /> está em contact_index_index.xml no <head> </head> elemento .... nenhuma borda azul em torno do formulário ... realmente estranho ..

— Lachezar Raychev

Nvm ... eu tive que criar a pasta Magento_Contact em static / frontend / Magento / luma / sv_SE e dentro criar a pasta css / e colocar dentro o arquivo styles.css ... agora funciona. Eu apenas pensei que dessa forma seria importar a forma de arquivo dentro do módulo-contact / view / frontend / css / pasta ...

— Lachezar Raychev

8

Tente estas etapas.

Crie um arquivo css nesse diretório. app / design / frontend / fornecedor / tema / web / css / customcss.css
Crie o arquivo default_head_blocks.xml se não existir neste caminho app / design / frontend / Vendor / theme / Magento_Theme / layout / default_head_blocks.xml

Coloque o código abaixo em 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>

Espero que isso ajude você!!

— Makwana Ketan
fonte

Preciso executar algum comando grunt depois de fazer isso?

— TheBlackBenzKid

11

o nome do arquivo css é dinâmico. agora, adicionei este código <link rel = "stylesheet" type = "text / css" media = "all" href = "<? php echo $ _helper-> getCSSFile ()?>"> em "after.body.start "container, como posso adicionar esse código em <head>?

— Mike

6

Eu mesmo encontrei a solução.

No arquivo xml de layout.

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

No arquivo custom_head.phtml

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

— Mike
fonte

1

Criar modelo personalizado

adicione o arquivo xml Namespace / YourModule / view / frontend / layout / default_head_blocks.xml

esse arquivo mudará o layout do cabeçalho usando a configuração da página. Leia mais em http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

exemplo de conteúdo do arquivo

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

adicione o arquivo css nesse caminho Namespace / YourModule / view / frontend / web / css / custom.css

— Mohamed Abo Badawy
fonte

Obrigado pela resposta. Funcionou para mim. Agora o css é aplicado em todas as páginas usando este arquivo.

— Vinay Sikarwar

Você pode me ajudar, como posso agora aplicá-la apenas na página do produto

— Vinay Sikarwar

Não tenho certeza disso, mas e a classe do corpo .catalog-product-view que o magento usa na página de produtos, você pode herdar propriedades CSS dele!

— Mohamed Abo Badawy