Modifying CSS live and bypass the cache

[joe_elbaz]

Hello everyone.

I'm new to Magento and i have read some articles and tutorials of how to build and modify themes. As all of you know, Magento isn't easy to understand even to a web developer, it takes time. I'm used to other platforms that have button which i can disable cache and i can modify the styles on Adobe Dreamweaver, save, upload & refresh the page on the browser to see the result.

My question is how in Magento can i accomplish the same easy way of development with the CSS styles i am creating and modifying? In other words, what is the best way for a web developer to work on Magento design?

Please, give me detailed solution if possible.

Thanks in advance!

[madhuresan_ramanan]

Hi @joe_elbaz,

You can override the default luma within your theme. it will works.


If my answer is useful, give kudos & accept as solution

Best regards
Madhuresan
Bootsgrid

[kitestop]

I don't know of a way to bypass the cache system during development like you describe.

I personally use Chrome's developer tools to modify the css prior to adding to my theme override file. So you can at least see that you are changing the right classes and what they will look like before committing them to the server. 

[bagreg]

If you're developing locally, you can use Magento's Grunt tooling.

If you're using something else to compile less you can run:

php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=YourNamespace/your_theme

This will create symlinks in pub static to the source files, you'll then need to compile the styles-l.less & styles-m.less files located in

pub/static/frontend/YourNamespace/your_theme/en_US

[joe_elbaz]

Thanks for your replies.

Finally i found a solution by adding custom.css file for the development stage. I added the file to the root directory where the site is.

In the head file (mine was root.phtml) i added this line to add the file with version of timestamp.

<link  rel="stylesheet" type="text/css"  media="all" href="<?php echo "/custom.css?v=" . time(); ?>" />

It works. every change i make it appears right away. After developing i will convert the file into LESS to override the existing theme style.