Magento 2.3 - CSS changes revert after running “ php bin/magento setup:static-content:deploy -f ”

[Aveeva]

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?

[Sunil Patel]

Hello @Aveeva 

you can not change into pub css.

you must edit into your theme app/design/frontend

you can use grunt for that

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html

if works then mark as solution

[gaurav_harsh1]

Hi @Aveeva 

pub/static/ is used as for caching.

We should always change CSS in themes or modules, whenever we run php bin/magento setup:static-content:deploy -f , Magento takes all CSS/JS changes from all modules and integrate it in pub/static folder.

So you can either find style-l.css in your module/theme and do changes in that file or you can add a new css in Module/Theme .

Note : We don't use -f in command when it is production mode.

[Nishu Jindal]

Hi @Aveeva ,

For adding changes in the style-l.css file, please create less file in your theme on below path app/design/frontend/Codazon/fatest/grocery_gourmet/Magento_Theme/web/css/source/_extend.less

Add your required CSS in this less file and run content deployment commands.

rm -rf pub/static/frontend/* var/cache/* var/page_cache/*

php bin/magento s:s:d -f

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

[Aveeva]

@Nishu Jindal  You mean copy everything from style-l.css and paste into _extend.less right?

[Nishu Jindal]

Hi @Aveeva,

No, Please add your css only in less file. 

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

[Aveeva]

@Nishu Jindal  If i inspect something it will show the path like pub/static/frontend/Codazon/fatest_grocery_gourmet/en_US/css/style-l.css 

Screenshot : 

Best way to edit this?

[Nishu Jindal · Accepted solution]

Hi @Aveeva,

This css must have written in some less file in your theme. You can find out the string in your theme  folder and change the css properties as according to your need.

Other way to edit the css of particular div is adding that css in _extend.less file with important tag so that it will override existing changes.

You can add .wrapper-ads08 .box selector and add css property with important tag.

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

[Aveeva]

@Nishu Jindal  Yes, working. Can i get some clarity?

If i search string .wrapper-ads08 .box in my whole magento folder there is two folder only 1) style-l.css (pub/statis) 2) what i create now, 

But you mentioned "  This css must have written in some less file in your theme. You can find out the string in your theme  folder and change the css properties as according to your need.  " 

I search the whole Magento folder there is no CSS file with contains the string  .wrapper-ads08 .box. Any help thanks.

[Nishu Jindal]

Hi @Aveeva,

Can you please search for the .wrapper-ads08 string only.

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!