5

I'm trying add custom css file for my module namely Magento_Hello in magento2. In the module I've created new page and trying to add new custom css to that page.

Here is what I have done in app/code/Magento/Hello/hello_index_index.xml. ('hello' is the frontName of my module)

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Hello\Block\Hello" name="hello" template="success.phtml"/>
        </referenceContainer>
    </body>
    <referenceBlock name="head">
        <block class="Magento\Theme\Block\Html\Head\Css" name="magento-hello-css">
            <arguments>
                <argument name="file" xsi:type="string">Magento_Hello::css/custom.css</argument>
            </arguments>
        </block>
    </referenceBlock>
</page>

I'have added the css here app\code\Magento\Hello\View\frontend\web\css\custom.css

But I'm getting the error in system.log which says the 'magento-hello-css' element cannot be added as child to 'head', because the latter doesn't exist [] []

What I'm doing wrong? Can anyone help here?

8

In the latest beta version for Magento 2 there is no more head block.
The head, content and other blocks are defined as containers.

should remove the <referenceBlock name="head"> section and instead add this inside the <head> tag (where you added the page title)

<css src="Magento_Hello::css/custom.css"/>

so your <head> tag should look like this:

<head>
    <title>Hello World</title>
    <css src="Magento_Hello::css/custom.css"/>
</head>
5
  • Are you sure this is the correct way to do it? When I've tried this method Magento goes for server.tld/pub/static/frontend/Magento/theme/language_CODE/Namespace_Module/css/custom.css which doesn't exist. – mludd Sep 3 '15 at 17:13
  • 1
    Yes, I'm sure. The static content files are deployed in the right place at runtime or by calling php bin/magento setup:static-content:deploy in the command line – Marius Sep 3 '15 at 19:17
  • Interesting, though it didn't help for me, it deployed a whole bunch of files for en_US (though I'm using the sv_SE locale) and my CSS file isn't available for en_US or sv_SE. Seems deploying a module has become a lot more involved with Magento 2... – mludd Sep 3 '15 at 19:38
  • This does not work for me either, at least not in the admin panel ... Does anyone have idea why ? I've done this in my layout .xml for the page <head> <css src="Vendor_Gift::css/test.css"/> </head> And I've tried to put the test.css file in both folder - view/web/css or view/adminhtml/web/css - clear the cache and the pub/static, deployed static content after that - NOTHING .... – Lachezar Raychev Feb 23 '16 at 8:40
  • Thanks, it works! Some hint for possible problems: Put your assets in view/frontend/web like: app/code/VENDOR/MODULE/view/frontend/web/css/styles.css app/code/VENDOR/MODULE/view/frontend/web/js/scripts.js – hayatbiralem Nov 11 '17 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.