Почему импортированный файл 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];
}
}
}