0

Please help to understand below 2: 1. How to override component css using less files? 2. Is anyone can provide some of examples to write css in _extend.less file.

0

You can add in your theme app/design/fronted/PackageTheme/YourTheme/Aheadworks/Autorelated/web/css, and copy the CSS file from app/code/Aheadworks/Autorelated/view/frontend/web/css, and there you can change it.

For edit in LESS file, you must add _module.less file in this path app/code/Aheadworks/Autorelated/view/frontend/web/css/source and you can also copy the CSS content from CSS files in _module.less and you can edit.

After that you must run php bin/magento setup:static-content:deploy

Best Practice:

You should not edit/modify files within pub/* or vendor/* directory. Pub is for deployment and vendor is for default structure, which you override via your template or custom modules. Instead:

  • create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma theme. You can also create new theme which inherites from Blank (inheritance is defined within theme.xml). If you are already using some theme then skip this step.
  • edit .less within your theme so the changes stay visible and don't get replaced when clearing the cache or upgrading the system.
  • Use grunt to compile your .less into deployment files.
  • You can also setup sourcemaps to pin point your styling within the theme .less files so you can be more productive.

I hope this will help

  • My question is slightly different. Actually I am overriding the luma theme as per best practices as suggested in official docs. Trying to get further understanding on luma theme less file editing. For example if I need navigation css changes, what should be the best practices. Should I directly add the css or I need to change the mixin/variables codes. Just trying to best way of theme css editing. – Kamlesh Yaduwanshi Jul 9 at 6:21
  • @KamleshYaduwanshi I add more detail in the answer, hope this will help you and other readers – Muhammad Hasham Jul 9 at 6:26
  • I am following all these best practices, just wants to know whether I edit the less codes mixing and variables or write regular css. – Kamlesh Yaduwanshi Jul 9 at 6:31

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.