0

After edited CSS then run php bin/magento setup:static-content:deploy -f my changes revert, all my css workout removed.

CSS Path : pub/static/frontend/Codazon/fatest_grocery_gourmet/en_US/css/style-l.css

Best practice to edit CSS files?

Improve this question
4
  • pub/static files are regenerated everytime you run this commands
    – Pramod
    Jul 10, 2020 at 7:51
  • if you are using phpstorm then you can check your css changes in history and get back
    – Pushpendra Singh
    Jul 10, 2020 at 7:54
  • check my ans on how to use custom css in magento 2
    – Pramod
    Jul 10, 2020 at 7:56
  • 1
    Follow this link magento.stackexchange.com/questions/96468/…
    – Ayush
    Jul 10, 2020 at 8:22

3 Answers 3

Reset to default
2

Did you changed the CSS in pup/static folder.If you did it is wrong. You need to change it's related less or css file in module/theme. After that run the required commands.

Improve this answer
0
2

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.

Some useful references:

FYI: Magento2: Best practice to modify css files

Improve this answer
2
  • From your point " edit .less " where it is located?
    – zus
    Jul 10, 2020 at 8:18
  • Here "edit" is not a file name. it means if you need to edit and less file then you do in your theme/child theme.
    – Pushpendra Singh
    Jul 10, 2020 at 8:39
1

Step 1: Create default_head_blocks.xml like below locations in your theme

app/design/frontend/Test/Theme/Magento_Theme/layout/default_head_blocks.xml and add the below code in it

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/yourcustomstyle.css" />
  </head>
</page>

Step 2: create your css file at below locations

app/design/frontend/Test/Theme/web/css/yourcustomstyle.css

Step 3:- now go to pub/static/frontend and delete everything inside frontend folder.

now run below commands

<root>php bin/magento setup:upgrade

<root>php bin/magento setup:static-content:Deploy -f

<root>php bin/magento cache:Clean
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.