Magento 2.2 – CSS Changes Not Reflecting

csserrormagento2.2

I am using Magento 2.2.1. I want to do changes in my CSS file. After inspecting on the website I am finding the source of CSS is from somewhere in pub/static folder. I tried editing the CSS in that folder and after that I ran the deploy command. But again my CSS is reverting back to the older one. Kindly help anyone. I have tried all the solutions provided in this website but am unable to get a correct way out of my problem.

Best Answer

You should not edit/modify files within pub/* or vendor/* directory.

The pub folder is for deployment only. Magento uses LESS CSS preprocessing for managing styles of themes and works in the following manner:

Magento CSS Preprocessing

Instead of making changes in pub folder's css or js files or working directly in vendor folder, follow these steps:

  • create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. 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.

For more info, have a look at the following useful links:

Related Topic