LessCSS 停止处理样式答案

【问题标题】：LessCSS stops processing stylesLessCSS 停止处理样式
【发布时间】：2016-07-08 06:10:37
【问题描述】：

我在 JS 模式 (less.js) 中使用 Less，方式如下：

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

在浏览了一些页面后，它会停止处理样式并提供“缓存”版本。为了让它重新解析样式，我必须清除浏览器 cookie。有谁知道这是为什么？是否有任何选项可以在每个页面视图上重新解析？非常感谢！

更新：查看一些库代码，似乎它使用 localStorage 将样式表存储为缓存。它基于文件的最后修改时间来更新该缓存，但由于某种原因它无法正常工作，因为它没有接受我的更改...

【问题讨论】：

标签： css less

【解决方案1】：

我刚刚为此找到了issue in GitHub。引用我自己的话：

这在 1.1.5 中也发生在我身上。该脚本使用 localStorage 来存储样式表。清除浏览器缓存将不起作用。您必须清除它的 cookie（注销所有帐户，%!@^#%）或执行 localStorage.clear()。我在加载 less.js 之前使用它（我自己不使用 localStorage）：

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

在生产时，您只需将样式表编译为 .css

【讨论】：

你不需要砍掉所有的localstorage，你可以删除LESS相关的keys。键看起来像 http{s}://{host}/path/to/file.less 和相关键 http{s}://{host}/path/to/file.less:timestamp。

【解决方案2】：

用 localStorage 很好地发现。因此，最快的解决方案是打开浏览器的控制台并运行以下命令：

localStorage.clear();

然后刷新，你就设置好了。

【讨论】：

【解决方案3】：

您可以使用以下方法来禁用 localStorage 缓存：

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

【讨论】：

我应该把那个放在哪个地方？
这是错误的。 less.env = "development" 使 less.js 在文档中抛出编译错误，less.watch() 打开样式表的自动重新加载。这些都不会禁用或清除缓存。
@Artur less.env = "development" 工作得很好（但不需要less.watch()）。
这是一个很好的答案，它有效，这正是我们应该做的（而不是清除本地存储）。相关的lessjs 文档在这里：lesscss.org/#client-side-usage-browser-options

【解决方案4】：

它缓存它的原因是因为生成 css 文件需要时间，而且如果你有很多代码要编译，那么这个时间可能会导致糟糕的用户体验。

你可以把它放在你的 html 文档中：

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

但这会禁用所有资源的缓存，而不仅仅是您的 less 文件。

【讨论】：

这将禁用从服务器拉取文件的缓存。这里的问题是不同的，即 less.js 在 localstorage 中添加了另一层缓存。

【解决方案5】：

执行此操作的更好方法是将 noCache=1 传递到 url 以在使用较少文件进行开发时清除浏览器 localStorage 然后它设置一个 cookie 以记住每次都清除它，然后您可以放置 noCache= 0 取消设置 cookie，这样最终用户在使用您的网站时不会最终删除他们的 localStorage，您可以将其保留。

$(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>

你需要jquery cookie插件才能工作

【讨论】：

【解决方案6】：

你还可以添加一个唯一的参数来防止缓存，例如如果你使用的是 php：

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

【讨论】：