Перезагрузить страницу с новым файлом LESS - PullRequest
Новая
       8

Перезагрузить страницу с новым файлом LESS

0 голосов
/ 20 ноября 2018

У меня есть страница со следующим полем выбора: 

    <form>
    <select id="themelist">
        <option value="style.less">Style 1</option>
        <option value="style-2.less">Style 2</option>
    </select>
    </form>

и это в заголовке: 

<link rel="stylesheet/less" type="text/css" href="style.less" id="lesslink">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>

У меня также есть следующее в моем script.js:

    $("#themelist").change(function() {
    var newTheme = $("#themelist option:selected").val()
    $("#lesslink").attr({href : newTheme}); 
});

Когда я выбираю Стиль 2 из выпадающего списка, я не получаю ошибок, но он не меняет стиль страницы.Я знаю, что вхожу в функцию, и что newTheme является правильным значением через оповещения.

Что мне здесь не хватает?

Спасибо,

РЕДАКТИРОВАТЬПосле дальнейшего рассмотрения кажется, что переход от стиля к стилю-2 приводит к нескольким небольшим изменениям CSS, которые являются последовательными, но случайными, и переход от стиля-2 к стилю ничего не делает.Что сейчас полностью смущает меня.Это также с использованием less.refresh ().Также в консоль не выдается никаких ошибок.

1 Ответ

0 голосов
/ 20 ноября 2018

Я нашел ответ в другом вопросе о SO, но в конце концов я искал другой путь и нашел его.

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

имел ответ, который был следующим :

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

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

Причина, по которой он не загружается должным образом, состоит в том, что LESS анализирует содержание, найти существующий блок стиля, а не добавить его. Последующие блоки стиля добавляются в конце главы, поэтому я был получить последнюю версию стиля.

Как только я изменил функцию, включив в нее следующее: 

$('style[id^="less:"]').remove();

до того как я сбросил href, он отлично работал!

Чтобы было ясно, вопрос был другим, но ответ на этот вопрос также оказался ответом на этот вопрос в том, что LESS добавлял свой собственный кусочек кода в конец head, который мне не нравился .

...