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?

Improve this question

1 Answer 1

Reset to default
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>
Improve this answer
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
    Commented Sep 3, 2015 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 ♦
    Commented Sep 3, 2015 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
    Commented Sep 3, 2015 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
    Commented Feb 23, 2016 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
    Commented Nov 11, 2017 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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