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

Файлы:

  • listing.less(text/css)
  • style.less(текст/css)

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

  • Firefox
  • Firefox addon httpFox для проверки заголовков http
  • Chrome

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

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

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

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

ОТВЕТЫ

Ответ 1

Это известная проблема в LESS. См. Вопрос github здесь: https://github.com/cloudhead/less.js/issues/47

Я знаю, что это не решит вашу проблему напрямую, там есть обходной путь, поместите следующую строку над вашим less.js import:

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

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

Ответ 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];
    }
  }
}