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="/Content/themes/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(true) 已解决该问题。

有什么想法吗？

Answer 1

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

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

您没有看到它返回的原因是 LESS 正在解析您的内容，找到现有的样式块，而不是添加它。后续样式块将添加到 head 的末尾，以便您获得样式的“最后一个”版本。

将您的功能更改为以下内容：

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

您应该会看到它以您想要的方式运行。