【问题标题】：Less.js aggressively caching imported less filesLess.js 积极缓存导入的 less 文件
【发布时间】：2017-03-30 13:00:57
【问题描述】：

我现在正在使用 less = { env: ‘development’ }; 通过 JavaScript 运行 Less，并且我有一个名为 main.less 的主文件，其中包含我所有的 @import，但是我导入的“子”.less 文件都不是更新，并且似乎只是使用旧的缓存样式。

将一行代码放入main.less，编译。将其删除并放入 nav.less，编译 main.less，并似乎从缓存中拉出 nav.less。呃。

我试过less.refresh();，甚至试过localStorage.clear();，但似乎没有任何改变结果。

我对此感到非常沮丧。

【问题讨论】：

你确定是 Less 脚本缓存了编译结果，不是浏览器缓存了链接的 Less 文件吗？

标签： javascript css caching less

【解决方案1】：

你说 localStorage.clear() 所以你必须在浏览器中使用 less。我试图为此建立一个环境，一切都按预期工作。我使用 less 选项如下：

{
      filename: "./test/main.less",
       useFileCache: false
}

html文件如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="blackmiaool's page">
    <meta name="author" content="blackmiaool">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/less.min.js"></script>
    <script src="js/jquery-2.1.3.js"></script>
</head>

<body>
    <button id="next">Next</button>
    <textarea id="output" placeholder="output" style="height:230px;width:230px;">
       
   </textarea>
    <script type="text/javascript">
        console.log(less);

        function update() {
            $.get("./test/main.less", function(mainFileContent) {
                less.render(mainFileContent, {
                        filename: "./test/main.less",
                        useFileCache: false
                    })
                    .then(function(output) {
                        $("#output").val(output.css);
                        console.log(output);
                    })
            });
        }
        update();
        $("#next").on("click", update);

    </script>
</body>

main.less:

@import "./nav.less";
h5 {
    font-size: 20px;
    color: aliceblue;
}

nav.less:

h4 {
    font-size: 50px;
}

你可以在这里下载一个演示（你应该自己部署它）：http://blackmiaool.com/test_less_demo.zip

我是如何尝试重现问题的

打开页面
打开 main.less
删除行color: aliceblue;
保存 main.less
打开nav.less
将color: aliceblue; 行插入第二行。
保存 nav.less
点击“下一步”按钮

输出从

h4 {
    font-size: 50px;
}
h5 {
    font-size: 20px;
    color: aliceblue;
}

到

h4 {
    font-size: 50px;
    color: aliceblue;
}
h5 {
    font-size: 20px;
}

如果文件请求被缓存了怎么办？

Less的文件请求码（来自less）：

FileManager.prototype.doXHR = function doXHR(url, type, callback, errback)     {

    var xhr = new XMLHttpRequest();
    var async = options.isFileProtocol ? options.fileAsync : true;

    if (typeof xhr.overrideMimeType === 'function') {
        xhr.overrideMimeType('text/css');
    }
    logger.debug("XHR: Getting '" + url + "'");
    xhr.open('GET', url, async);

根据这个sn-p，少用xhr来获取文件（当然）。所以我们可以尝试破解XMLHttpRequest来更改url：

var preOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    var args = Array.prototype.slice.call(arguments, 0);
    if (url.match(/\.less$/)) {
        url += `?time=${Date.now()}`;
        args[1]=url;
    }            
    return preOpen.apply(this, args);
}

Demo

并打开“网络”选项卡以检查较少的文件请求。

【讨论】：

想知道：如果useFileCache 为真，如何清除该缓存？我遇到了浏览器缓存由于某种原因受到干扰的问题。
这可能需要深入研究源代码。 @MichaelStum
好吧，我刚刚发现你是提供赏金的人。文档说缓存存储在localStorage中，OP说localStorage.clear();对此没有用。那你的条件是什么？为什么提到浏览器缓存？ @MichaelStum
中文该睡觉了。如果您更详细地描述您的需求，我会在明天尝试解决。
@MichaelStum 执行 localStorage.clear();为你工作？