How to style modules using recommended practice

Magento 2
1

Hi,

Can you please let me know what is the correct way of styling a module look and feel on the front end?

i.e. I have a module from amasty.
From my understaning I need to modify ccs entries in _module.less file which sits on my server under:

vendor/amasty/module_name/view/frontend/web/css/sourse/_module.less

When I change the file, clear cache, remove pub/static/* and var/view_prepocessed/* my changes are nicely shown on the front end but I’m guessing when I update the module all my changes will be overwritten. That is why I should never customize anything in the vendor directory.

I tried to move the _module.less file and modify it there but there are no changes on the front end.

app/design/frontend/my_store/theme/web/css/source

Could you please give me a tip on how to do it correctly?
Thank you.

2

Yes, your current solution would be classed as editing “core code”.

Format Example

Now, if memory serves, you’re close with your solution. I think you actually need to put your _module.less file under:

app/design/frontend/my_store/theme/amasty_module/web/css/sourse/_module.less

Real Example

In the following example, it assumes you’re using:

  • Smartwave Porto Theme ("Smartwave")
  • Porto Child Theme ("porto_child")
  • Amasty Module called “Example” ("Amasty_Example")

*All care-sensitive

app/design/frontend/Smartwave/porto_child/Amasty_Example/web/css/sourse/_module.less

Side Note

I believe another way of doing it is to create a module in app/code/ and do something similar. But I don’t think I’ve done it that way before - So, I can’t talk you though it.

3

Neither of these two worked for me.

I tried 2 ways under /frontend
1.1
frontend/my_store/theme/Amasty_module-name/web/css/sourse/_module.less
1.2
frontend/my_store/theme/Amasty/module-name/web/css/sourse/_module.less
…and one creating a module
2.
app/code/my_store/Amasty_module-name/web/css/sourse/_module.less

Annoying. I believe I will have to live with it and every time I upgrade the module I will have to update the file.

4

I’ll edit my answer over the weekend once I try it myself. I don’t think I’m far off the answer.

5

Thank you for your time.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.