jQuery and LESS, stylesheet update only works once

问题

Attempting to update a custom CSS href, which works fine the first time, but on subsequent updates no changes occur to the page. I can see the href updating in Chrome debugger, so the event is firing, and LESS is not throwing any errors, but the colors don't update the second time around.

Here's some of the code (concatenated for readability; note I'm using VS 2010, MVC4, thus less.css extension):

<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>

Note that the stylesheet link resides in the header, so all markup is semantically correct (with the exception of the CssUrl attribute, of course). If I change the link href, then back again, the new values are not redrawn.

Example:

Click "Green CSS" button -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox turns green.

Click "Red CSS" button -> link href="/Content/themes/customizable_red.less.css" -> ThemeBox turns red.

Click "Green CSS" button -> link href="/Content/themes/customizable_green.less.css" -> ThemeBox stays red.

I suspect this has something to do with .less caching, which is why I've added the localStorage.clear() call, but neither that nor less.refresh(true) have resolved the issue.

Any thoughts?

回答1:

This is due to the way LESS seems to work. It parses the less file, and then adds a style attribute to the DOM. In practice, these seem to follow the format of the following

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

The reason you're not seeing it go back is because LESS is parsing your content, finding the existing style block, and not adding it. Subsequent style blocks are being added at the end of head so you get the 'last in' version of your style.

change your function to the following:

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

and you should see it function the way you want.

来源：https://stackoverflow.com/questions/10420299/jquery-and-less-stylesheet-update-only-works-once

标签

jquery

css

stylesheet

less

asp.net-mvc-4