Tại sao tệp css được nhập được lưu trữ trong localstorage và không làm mới như tệp css được liên kết?

Question

Files:

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

cụ:

• Firefox
• Firefox addon httpFox để kiểm tra tiêu đề http
• Chrome

Tôi có một tập tin css tên listing.less chứa sau:

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

Khi tôi gọi listing.less tất cả mọi thứ hoạt động tốt, style.less được nhập khẩu. Các yêu cầu tiếp theo cho kết quả liệt kê trong một phản hồi được lưu trong bộ nhớ cache 304. Đó là tốt. Tuy nhiên, style.less đã nhập không hiển thị dưới dạng phản hồi được lưu trong bộ nhớ cache. Thay vào đó, tôi tìm thấy nó trong localstorage của trình duyệt. Vấn đề lớn hơn là nếu tôi thực hiện một thay đổi để style.less sau đó nhấn làm mới trình duyệt sẽ không cập nhật phong cách. Style.less sẽ chỉ làm mới nếu tôi xóa nó khỏi localstorage hoặc chạm vào listing.less trên máy chủ.

Đó có phải là bản chất của @import không? Tôi có cần chạm vào list.less hoặc delete style.less từ localstorage mỗi khi tôi muốn cập nhật style.less? Làm thế nào có thể style.less buộc phải làm mới?

Answer 1

Đây là sự cố đã biết trong LESS. Xem các vấn đề github đây: https://github.com/cloudhead/less.js/issues/47

Tôi biết nó không giải quyết được vấn đề của bạn trực tiếp, có một cách giải quyết khác được liệt kê ở đó, đặt dòng sau trên nhập khẩu less.js của bạn:

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

và những thứ nên thường làm việc.

Answer 2

Đây là cách tiếp cận tôi sử dụng ngay bây giờ, bởi vì ngay cả trong chế độ phát triển, tôi tìm thấy @imported CSS vẫn được lưu vào bộ nhớ cache mãi mãi.

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]; 
    } 
    } 
}