jQuery и LESS, обновление таблицы стилей работает только один раз

Question

Пытается обновить пользовательский CSS href, который отлично работает в первый раз, но при последующих обновлениях на страницу не происходит никаких изменений. Я вижу обновление href в отладчике Chrome, поэтому событие запускается, и 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 становится зеленым.

Нажмите кнопку «Красный CSS» -> ссылка href = "/ Content/themes/customizable_red.less.css" -> ThemeBox становится красным.

Нажмите кнопку «Зеленый CSS» -> ссылка href = "/ Content/themes/customizable_green.less.css" -> ThemeBox остается красным.

Я подозреваю, что это что-то делать с .less кэширования, поэтому я добавил localStorage.clear() вызова, но ни то, ни less.refresh (истина) нет разрешили проблему.

Любые мысли?

Answer 1

Это связано с тем, что LESS, похоже, работает. Он анализирует файл меньше, а затем добавляет a style атрибут DOM. На практике это, кажется, следовать формату следующего

<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(); 
    }); 

и вы должны увидеть его работать так, как вы хотите.