Magento 2.15 after cache flush made .css changes disapeared

Question

Any advise how is the best to adjust .css (colors), that it would stay permanently?

After editorials in .css and flushed cached all changes in .css disappeared. Any advise how I could keep them permanently?

Answer 1

To make your CSS changes stay permanently in Magento 2

Follow below steps for adding custom css and changing existing CSS.

Option 1) Extend the module whom CSS you want to change, for example cart page css

so after extending Magento_Checkout module you can change that in _cart.less under below extended path

app/design/frontend/vendorname/themename/Magento_Checkout/web/css/source/module/_cart.less

Option 2) Extend _extend.less under below path , here you can also write your custom CSS/LESS or can overwrite existing.

app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

Option 3) Adding Via XML , for example adding bootstrap CSS/JS or your custom stylesheet

Add below code in your default_head_blocks.xml under your extended theme

app/design/frontend/vendorname/themename/Magento_Theme/layout/default_head_blocks.xml

<css src="css/bootstrap.css" />
<css src="css/custom.css" />
<script src="js/jquery-1.11.3.min.js"></script>

kepp all file under below path to work flawless

app/design/frontend/vendorname/themename/web/css/custom.css

To make less changes work efficiently don't forget to run upgrade/deploy/cache commands

I hope this will help you out

Answer 2

Magento2 dont writes CSS directly on css files.

Magento CSS preprocessing is different totally different process. Its using LESS for Css processing

In css files, you cannot write css code directly:

1. For any changes at css files, you should write code in respective less files

Then:

2.Magento2 less processor, is take all less from theme ,then genereta css and less at MagentoDir/var/view_preprocessed/source/[Area=frontend/adminhtml]/[Vendorname]/[ThemeName]/en_US/css

After that:

3. copy those css to MagentoDir/pub/static/[Area=frontend/adminhtml] /[Vendorname]/[ThemeName]/

So when you have cache then files at MagentoDir/var/view_preprocessed replaced .

So if you anything changes at pub/static and refresh the it automatically remove from those as those folder files are regenerate whenever run flush cache.