Почему импортированный css-файл хранится в localstorage, а не обновляется как связанный css-файл?

Question

Файлы:

• list.less (текст / CSS)
• style.less (текст / CSS)

Инструменты:

• Firefox
• Надстройка Firefox httpFox для проверки заголовков http
• Chrome

У меня есть файл css с именем list.less, который содержит следующее:

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

Когда я вызываю list.less, все работает нормально, style.less импортируется.Последующие запросы на перечисление .less приводят к 304 кешированному ответу.Все в порядке.Однако импортированный style.less не отображается как кэшированный ответ.Вместо этого я нахожу это в хранилище браузера.Большая проблема в том, что если я внесу изменение в style.less, тогда нажмем кнопку «Обновить», браузер не будет обновлять стиль.Style.less будет обновляться только в том случае, если я удалю его из localalstorage или коснусь list.less на сервере.

Это природа @import?Нужно ли трогать list.less или удалять style.less из localalstorage каждый раз, когда я хочу обновить style.less?Как можно принудительно обновить style.less?

Answer 1

Это известная проблема в 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>

и все в целом должно работать.

Answer 2

Я использую этот подход сейчас, потому что даже в режиме разработки я считаю, что @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];
    }
  }
}