Magento 2: how to add css ONLY to custom module

Question 1

I created a custom module that overrides the addtocart.phtml file. In that module, I also created a css file. Here is what I did:

Here is my layout - catalog_product_view.xml:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <css src="Vendor_Module::css/style.css"/>
 </head> 
 <body>
 <referenceBlock name="product.info.addtocart">
 <action method="setTemplate">
 <argument class="Magento\Catalog\Block\Product\View" name="template" xsi:type="string">Vendor_Module::product/view/addtocart.phtml</argument>
 </action>
 </referenceBlock>
 <referenceBlock name="product.info.addtocart.additional">
 <action method="setTemplate">
 <argument class="Magento\Catalog\Block\Product\View" name="template" xsi:type="string">Vendor_Module::product/view/addtocart.phtml</argument>
 </action>
 </referenceBlock>
 </body>
</page>

and then I put the style.css in /Vendor/Module/view/frontend/web/css

I thought that in this case the css file could be visible ONLY in the module, but it is not. How can I make it visible ONLY in that phtml file? I mean, I want the css to be able to edit ONLY the files into the module.

Is it possible?

Thanks

Question 2

You cant make css visible only in a phtml file or only in a module because it gets loaded globally. However, you can continue to include it globally but limit the scope of its effect.

For example, you could add a css class to the outermost element in your template.

<div class="module-outermost-element">
 <div class="something">my stuff</div>
 <div class="something">more of my stuff</div>
</div>

Then in your css, prepend all of your css like this

.module-outermost-element .something {
 background-color: #00FF00;
 /* more css here */
}

On another note, it's not best practice to include the css directly in the head the way you are doing it. That adds additionall http requests to an already heavy-on-requests page load. You should use LESS so it's compiled and included with Magento's css.

You can do so by including your code in Vendor/Module/web/css/source/_module.less. This file will get included automatically.

Update in response to question posted in comments. To add that css only for specific products:

Go the product edit page for each product
Scroll down to the Design section
Add your css include in the Layout Update XML section as shown in the screenshot below

Question 3

Mmm, I understand. And how can I solve my issue? I created the custom module only for certain products. How can I use that css ONLY for those products?

Question 4

That one is easy. Updating my answer momentarily.

Question 5

Answer updated.

Question 6

Oh wow, didn't know that. Still it is not the best thing to do actually since I have something like 20-30 products and I would have more. Is there a faster way?

Question 7

It actually is the best way. You can probably do it in bulk from the product grid. Use the checkboxes and select "Update Attributes". The field should be there I think

Shawn Abramson 3,5801 gold badge18 silver badges22 bronze badges · Accepted Answer · 2019-10-05 18:04:37Z

You cant make css visible only in a phtml file or only in a module because it gets loaded globally. However, you can continue to include it globally but limit the scope of its effect.

For example, you could add a css class to the outermost element in your template.

<div class="module-outermost-element">
 <div class="something">my stuff</div>
 <div class="something">more of my stuff</div>
</div>

Then in your css, prepend all of your css like this

.module-outermost-element .something {
 background-color: #00FF00;
 /* more css here */
}

On another note, it's not best practice to include the css directly in the head the way you are doing it. That adds additionall http requests to an already heavy-on-requests page load. You should use LESS so it's compiled and included with Magento's css.

You can do so by including your code in Vendor/Module/web/css/source/_module.less. This file will get included automatically.

Update in response to question posted in comments. To add that css only for specific products:

Go the product edit page for each product
Scroll down to the Design section
Add your css include in the Layout Update XML section as shown in the screenshot below

Mmm, I understand. And how can I solve my issue? I created the custom module only for certain products. How can I use that css ONLY for those products?
Oh wow, didn't know that. Still it is not the best thing to do actually since I have something like 20-30 products and I would have more. Is there a faster way?
It actually is the best way. You can probably do it in bulk from the product grid. Use the checkboxes and select "Update Attributes". The field should be there I think

Stack Exchange Network

Magento 2: how to add css ONLY to custom module

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Magento 2: how to add css ONLY to custom module

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions