jQueryとLESS、スタイルシートの更新は一度しか動作しません

Question

最初に正常に動作するカスタムCSS hrefを更新しようとしましたが、その後の更新ではページに変更は発生しません。 Chromeデバッガでhrefの更新が表示されるため、イベントが発生していて、LESSでエラーは発生していませんが、色はもう一度更新されません。

ここでは、コードの一部（読みやすくするために連結し、私はVS 2010、MVC4、これ less.css拡張子を使用しています注意してください）です：スタイルシートのリンクはヘッダ内に存在することを

<link href="/Content/themes/customizable_default.less.css" id="CustomCSS" rel="stylesheet/less" type="text/css"> 

     <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_default.less.css">Default CSS</a> 
     <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_green.less.css">Green CSS</a> 
     <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_gray.less.css">Gray CSS</a> 
     <a class="ToggleButton btn-primary" CssUrl="/Content/themes/customizable_blue.less.css">Blue CSS</a> 

     <div class="ThemeBox"> 
      <div class="ThemeCompartment1"> 
       <h2>This is the title.</h2> 
      </div> 
      <div class="ThemeCompartment2"> 
       <p>A bunch of copy goes here.</p> 
      </div> 
     </div> 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

     // choosing a template 
     $('.ToggleButton').click(function (e) { 
      $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') }); 
      localStorage.clear(); 
      less.refresh(); 
     }); 
    }); 

</script> 

注意、すべてのマークアップは意味的に正しいものです（もちろんCssUrl属性は例外です）。私がリンクhrefを変更した後、再び元に戻すと、新しい値は再描画されません。

例：

クリックして "グリーンCSS" ボタン - >リンクのhref = "/コンテンツ/テーマ/ customizable_green.less.css" - > ThemeBoxが緑色に変わります。

"Red CSS"ボタン - > link href = "/ Content/themes/customizable_red.less.css" - > ThemeBoxが赤色に変わります。

"Green CSS"ボタン - > link href = "/ Content/themes/customizable_green.less.css" - > ThemeBoxは赤色のままです。

は、私は、これは私がlocalStorage.clearを（）コール追加した理由です.lessキャッシング、とは何かを持っている疑いがあるが、どちらもそのもless.refresh（真）はありません問題を解決しました。

どのような考えですか？

Answer 1

これはLESSがうまくいく方法によるものです。それは少ないファイルを解析し、次にはのstyle属性をDOMに追加します。 LESSは、あなたのコンテンツを解析する既存のスタイルブロックを見つけ、それを追加されていないため、実際には、これらは以下の

<style type='text/css' id='less:<<NAME OF YOUR LESS FILE>>'> 
    /*your parsed content*/ 
</style> 

の形式に従っているように見えるあなたはそれが戻って見ていない理由があります。その後のスタイルブロックはheadの末尾に追加されていますので、あなたのスタイルの「最後の」バージョンが得られます。

次にあなたの関数を変更

：

$('.ToggleButton').click(function (e) { 
     $('style[id^="less:"]').remove(); 
     $('link#CustomCSS').attr({ href: $(this).attr('CssUrl') }); 
    less.refresh(); 
    }); 

を、あなたはそれはあなたが望むように機能しているはずです。