0

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

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

& when(@media-common = true) {

// write here your css 

}

Then run below commands

  1. php bin/magento setup:upgrade
  2. php bin/magento setup:static-content:deploy -f
  3. php bin/magento cache:flush

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.