LessCSS stops style processing

Question

I am using Less in JS mode (less.js) as follows:

<link rel="stylesheet/less" href="assets/styles/less/bootstrap.less" media="all"> <script src="assets/scripts/libs/less-1.1.5.min.js"></script> 

And after some pageviews, it stops processing styles and gives a "cached" version. To repurpose styles, I have to clear my browser cookies. Does anyone know why this is? Is there any option to review it on every pageview? Many thanks!

UPDATE:. Looking at some library code, it looks like it uses localStorage to store stylesheets as a cache. It is based on the last modified file of the file to update this cache, but for some reason it does not work properly, because it does not accept my changes ...

Answer 1

I just found a problem on GitHub . I quote myself:

This happens to me in 1.1.5. The script uses localStorage to store style sheets. Clearing the browser cache will not work. You must clear the cookies (log out of all accounts,%! @ ^ #%) Or do localStorage.clear (). I use this before loading less.js (not using localStorage):

 <script> /* Provisory for dev environment: */ localStorage.clear(); </script> 

When you switch to production, you simply compile .css style sheets

Answer 2

Nice find with localStorage. Therefore, the quickest solution is to open the browser console and run the following command:

 localStorage.clear(); 

Then update and you will install.

Answer 3

To disable the localStorage cache, you can use the following:

 <script>var less=less||{};less.env='development';</script> <script src="path_to_less.js"></script> 

Answer 4

The reason it is cached is because it takes time to generate css files, and that time can add to a bad user if you have a lot of code to compile.

you can put this in your html documents:

 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1"> 

But this will disable caching of all resources, not just your smaller files.

Answer 5

The best way to do this would be by passing noCache = 1 to the url to clear the localStorage browser when you develop less files, then it sets a cookie to remember, to clear it every time, and then you could put noCache = 0 so that disable the cookie, so the end user cannot delete his local storage when using your site, and you can just leave it.

 $(document).ready(function () {<br> if(window.location.href.indexOf("noCache=1") > -1) {<br> $.cookie('noCache', '1', { expires: 1, path: '/' });<br> localStorage.clear();<br> }<br> if(window.location.href.indexOf("noCache=0") > -1) {<br> $.cookie('noCache', '0', { expires: 1, path: '/' });<br> }<br> if ($.cookie('noCache') == '1'){<br> alert ("disabled Cache");<br> localStorage.clear();<br> }<br> });<br> <br> 

you will need a jquery cookie for this to work

Answer 6

you can also add a unique parameter to prevent caching, for example, if you use php:

 <link rel="stylesheet/less" href="assets/styles/less/bootstrap.less?v=<?= uniqid() ?>" media="all">