Adding css to a module in Magento 2

Question

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?

Why you just can't create a custom theme? It would make development a lot easier. — Macas, Feb 25 '18 at 20:41
It was successful with the theme but I wanted to try to decrease the files and the complexity only to a css and a xml file because the only needed change is to margin a text field with 10 px. — Konstantin Patroev, Feb 27 '18 at 09:57
Sooner or later you will need to do some more changes. There is no project where all you need is 10px margin. Also in my opinion, themes adds some clarity not complexity. — Macas, Feb 28 '18 at 17:49

PЯINCƎ · Answer 1 · 2018-02-25T22:27:34.017

1

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

edited Feb 25 '18 at 22:27

answered Feb 25 '18 at 15:46

PЯINCƎ

11,669
3
25
80

Thank you for the response! Question: for xsi:noNamespaceSchemaLocation="should I put my path leading up to that file and shouldn't Vendor be with a lower case? – Konstantin Patroev Feb 25 '18 at 16:33
Look my update please, more information about xml schema validation: http://devdocs.magento.com/guides/v2.0/extension-dev-guide/build/XSD-XML-validation.html – PЯINCƎ Feb 25 '18 at 22:28

score 1 · Answer 2 · edited Apr 21 '22 at 11:32

1

Create _module.less file inside Vendor\Module\view\frontend\web\css\source\ and write below code inside the file:

& when(@media-common = true) {
  // write here your css 
}

Then run below commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

edited Apr 21 '22 at 11:32

Mario Boss

113
6

answered Apr 25 '19 at 11:10

Ansar Husain

3,409
1
12
30

Adding css to a module in Magento 2

2 Answers2