jQuery和LESS，样式表更新仅适用一次 [英] jQuery and LESS, stylesheet update only works once

问题描述

尝试更新自定义CSS href，这在第一次使用时效果很好，但是在随后的更新中，页面未发生任何变化.我可以在Chrome调试器中看到href更新，因此该事件正在触发，并且LESS不会引发任何错误，但是颜色不会第二次更新.

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.

以下是其中的一些代码(为便于阅读而合并；请注意，我使用的是VS 2010，MVC4，因此使用了 less.css 扩展名):

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>

请注意，样式表链接位于标头中，因此所有标记在语义上都是正确的(当然，CssUrl属性除外).如果我更改链接href，然后再次返回，则不会重绘新值.

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.

示例:

点击绿色CSS"按钮->链接href ="/Content/themes/customizable_green.less.css"-> ThemeBox变为绿色.

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

点击红色CSS"按钮->链接href ="/Content/themes/customizable_red.less.css"-> ThemeBox变为红色.

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

点击绿色CSS"按钮->链接href ="/Content/themes/customizable_green.less.css"-> ThemeBox保持红色.

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

我怀疑这与.less缓存有关，这就是为什么我添加了 localStorage.clear() 调用的原因，但既不是也不是 less.refresh(true) 解决了该问题.

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.

有什么想法吗?

推荐答案

这是由于LESS的工作方式所致.它解析出较少的文件，然后添加一个style属性到DOM.在实践中，这些似乎遵循以下格式

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>

之所以看不到它，是因为LESS正在解析您的内容，找到现有的样式块，而不添加它.在head的末尾添加了后续的样式块，以便获得样式的最新"版本.

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.

这篇关于jQuery和LESS，样式表更新仅适用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！