Magento 2: The style.css inside Magento installation directory is effecting cache

magento.stackexchange https://magento.stackexchange.com/questions/283766

Question

I am very new to Magento. Recently I have to add extra styles to my magento website. So I go to adminpanel -> content-> design->configuration->my theme ->HTML Head

I add the following line 

<link rel="stylesheet" type="text/css" media="all" href="https://example.com/my-style/style.css" />

Then I save that one. Now new styles are working on my website. But I edited some of the styles through opening the file through Filezilla and edit. After that, I uploaded. Then I noticed that new changes are not coming. So I open https://example.com/my-style/style.css in a browser so I can see that it is not updated the copy. I refresh the page and I open in incognito window. Still the same. But when I open in the same file through editor using FileZilla I can see that it is updated copy.

Then I try to refresh page cache, layout cache but the result is the same.

i am using FileZilla for accessing the file . i don't have the terminal . Please help

Was it helpful?

Solution

As you've said that, you've inserted the CSS file directly on in the header which is placed under /var/www/html/my-style/style.css.

You need to flush the CDN and Server caches as well if they are enabled on the website.

As you've shared, your site has enabled the Cloudfare, then you need to flush the cache for the below path from Cloudfare

/var/www/html/my-style/style.css

Also, you can add a custom CSS file in your theme by adding a CSS file to the below path:

/app/design/frontend/[vendor]/[your_theme]/web/css/your_css_file

Include the created file by adding it to /app/design/frontend/[vendor]/[your_theme]/Magento_Theme/layout/default_head_blocks.xml with below content.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/your_css_file.css" />
    </head>
</page>

Below is the official guide to include custom CSS files in your theme.

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

Hope it helps!!!

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top