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?
-
pub/static files are regenerated everytime you run this commandsPramod– Pramod2020年07月10日 07:51:19 +00:00Commented Jul 10, 2020 at 7:51
-
if you are using phpstorm then you can check your css changes in history and get backPushpendra Singh– Pushpendra Singh2020年07月10日 07:54:36 +00:00Commented Jul 10, 2020 at 7:54
-
check my ans on how to use custom css in magento 2Pramod– Pramod2020年07月10日 07:56:54 +00:00Commented Jul 10, 2020 at 7:56
-
1Follow this link magento.stackexchange.com/questions/96468/…Ayush– Ayush2020年07月10日 08:22:20 +00:00Commented Jul 10, 2020 at 8:22
3 Answers 3
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.
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:
-
From your point " edit .less " where it is located?zus– zus2020年07月10日 08:18:11 +00:00Commented 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– Pushpendra Singh2020年07月10日 08:39:52 +00:00Commented Jul 10, 2020 at 8:39
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