Magento – Adding css to a module in Magento 2

csscustommagento2modulexml

I am trying to add custom CSS without creating a theme and these are my steps.

Step 1
I create a mycss.css file

body{
 background-color:green;

 }

and this is the path

app/code/vendor/module/view/frontend/web/css/mycss.css

Step 2
I create a test_index_index.xml file with this content

?xml version="1.0"?>
     <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
       <head>
          <css src="vendor_Module::css/mycss.
     </head> 
       <body>
         <referenceContainer name="content">
              <block class="vendor\Module\Block\class" template="vendor_Module::class.phtml"/>
         </referenceContainer>  
     </body> 
    </page>

Which is located at

app/code/vendor/module/view/frontend/layout/test_index_index.xml

Reference Magento 2: How to add css and js in custom module in magento 2?

Unfortunately, on my frontend nothing changes. Does anybody know why?

Best Answer

test_index_index.xml

<?xml version="1.0"?>
        <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
        <head>
            <css src="Vendor_Module::css/mycss.css"/>
        </head> 
        <body>
            <referenceContainer name="content">
                <block class="Vendor\Module\Block\Class" template="Vendor_Module::file.phtml"/>
            </referenceContainer>  
        </body> 
    </page>

php bin/magento cache:clean

php bin/magento setup:static-content:deploy -f

Related Topic