Question

我正在使用cookie来查明用户是在身体处于亮还是暗模式下。如果找不到cookie，我总是将light.less用作后备/默认值。因此，在我的<head>中，

<link rel="stylesheet" type="text/css" href="../assets/main.css">
<link rel="stylesheet/less" type="text/css" id="colorMode" href="../assets/light.less">
<script src="../assets/less.js/dist/less.min.js" type="text/javascript"></script>

我的身体标签如下：

<body onload="checkNav(); checkCookies();" onresize="checkNav()">

checkCookies()是查看cookie并采取相应措施的功能，如下所示。

function checkCookies() {
var style = getCookie("style");
if (style == 'dark') {
    document.getElementById("colorMode").href = "../assets/dark.less";
    document.getElementById("switchIcon").innerHTML = "toggle_on";
    document.cookie = "style=dark; path=/~sam.walker";
} 

else {
        //Already set by default
    }
}

getCookie()函数仅返回相关的样式cookie

具有href = colorMode的{{1}}样式表确实可以按照我与检查员的检查更改为../assets/light.less，但样式本身并未发生实际变化。我已经检查了缓存，与缓存无关。任何帮助将不胜感激。

Answer 1

除非您在页面的df['brand_count']= df.brand.map(df.brand.value_counts())部分中添加了.less，否则将样式表包含为<script src="less.js" type="text/javascript"></script>格式是行不通的。

从Less.js here

中查看使用情况信息

Answer 2

less.min.js将找到对LESS文件的引用，并在加载时从它们生成CSS。

您要在之后创建一个对LESS文件的新引用，到那时，less.js来不及了。

在链接到LESS样式表之后但在加载checkCookies();脚本之前，您需要调用less.js。

Answer 3

感谢您的帮助，

通过您的信息，我发现了以下（ botch ）修复程序：

var elem = document.getElementById('NameOfOriginalLessGeneratedStyle'); //REQUIRES CHANGE ON SERVER CHANGE
elem.parentNode.removeChild(elem);
//Deleted previous styles
less.refresh();
//Loads new style

应在样式表href更改后运行。

通过JS为.less样式表设置href

3 个答案: