为什么导入的 css 文件会存储在本地存储中，而不是像链接的 css 文件那样刷新？

发布于 2024-12-01 04:10:14 字数 634 浏览 5 评论 0原文

文件：

listing.less (text/css)
style.less (text/css)

工具：

Firefox
Firefox 插件 httpFox 用于检查 http 标头
Chrome

我有一个名为listing.less的css文件，其中包含以下内容：

@import "/orb/static/less/style.less";

当我调用listing.less所有内容时工作正常，style.less 被导入。对listing.less 的后续请求会导致 304 缓存响应。没关系。但是，导入的 style.less 不会显示为缓存的响应。相反，我在浏览器的本地存储中找到它。更大的问题是，如果我更改 style.less 然后点击刷新，浏览器将不会更新样式。仅当我从本地存储中删除 style.less 或触摸服务器上的listing.less 时，style.less 才会刷新。

这就是@import 的本质吗？每次我想更新 style.less 时，是否需要触摸listing.less或从本地存储中删除style.less？ style.less如何强制刷新？

原文

Files:

listing.less (text/css)
style.less (text/css)

Tools:

Firefox
Firefox addon httpFox for inspecting http headers
Chrome

I have a css file named listing.less that contains the following:

@import "/orb/static/less/style.less";

When I call listing.less everything works fine, style.less is imported. Subsequent requests for listing.less results in a 304 cached response. That's fine. However, the imported style.less doesn't show up as a cached response. Instead, I find it in the browser's localstorage. The bigger problem is if I make a change to style.less then hit refresh the browser will not update the style. The style.less will refresh only if I delete it from localstorage or touch listing.less on the server.

Is that the nature of @import? Do I need to touch listing.less or delete style.less from localstorage every time I want to update style.less? How can style.less be forced to refresh?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡写薰衣草的香 2024-12-08 04:10:14

这是 LESS 中的一个已知问题。请参阅此处的 github 问题：
https://github.com/cloudhead/less.js/issues/47

我知道事实并非如此不能直接解决您的问题，那里列出了一个解决方法，请将以下行放在 less.js 导入上方：

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

并且通常应该可以正常工作。

This is a known issue in LESS. See the github issue here:
https://github.com/cloudhead/less.js/issues/47

I know it doesn't solve your problem directly, there is a workaround listed there, put the following line above your less.js import:

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

and things should generally work.

回复收藏 0 原文

故人如初 2024-12-08 04:10:14

这是我现在使用的方法，因为即使在开发模式下，我发现 @imported CSS 也会永远缓存。

https://gist.github.com/1346280

// Destroys the localStorage copy of CSS that less.js creates

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'

  if (!window.localStorage || !less || less.env !== 'development') {
    return;
  }
  var host = window.location.host;
  var protocol = window.location.protocol;
  var keyPrefix = protocol + '//' + host + pathToCss;

  for (var key in window.localStorage) {
    if (key.indexOf(keyPrefix) === 0) {
      delete window.localStorage[key];
    }
  }
}

This is the approach I use now, because even in development mode, I find @imported CSS stays cached forever.

https://gist.github.com/1346280

// Destroys the localStorage copy of CSS that less.js creates

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'

  if (!window.localStorage || !less || less.env !== 'development') {
    return;
  }
  var host = window.location.host;
  var protocol = window.location.protocol;
  var keyPrefix = protocol + '//' + host + pathToCss;

  for (var key in window.localStorage) {
    if (key.indexOf(keyPrefix) === 0) {
      delete window.localStorage[key];
    }
  }
}

回复收藏 0 原文

~没有更多了~