当前位置: 首页 > 工具软件 > Less.js > 使用案例 >

html加载less,javascript – 动态加载less.js规则

楚奇逸
2023-12-01

我正在看使用

less.

js(看起来不错),但我们的网站要求在初始页面加载后,动态加载一些样式。但是,似乎所有的LESS样式表都必须在less.js脚本加载之前加载。即这样做

但是如果行被交换,则它将失败,除非它们被正确排序,否则Firefox和Chrome都不会尝试加载“style.less”。订单要求在this tutorial年明确注明。

初始页面加载后,是否有任何方式加载样式表?

请注意,this blog描述了“手表”功能 –

which will auto-refresh the CSS whenever you save your LESS code

所以希望在页面加载后可以添加一些LESS规则似乎是合理的。感觉就像我错过了一些东西。

干杯,

科林

更新:用于测试注释中描述的行为的代码(脚本后列出的样式表较少) –

Simple
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Bingo

console.log("refreshing styles...");

less.sheets.push(document.getElementById('abc123'));

//var lessStyle = $("").attr("id", "less:static-less-style").attr("type", 'text/less');

//$("head").append(lessStyle);

less.refresh(true);

console.log("refreshed...");

和较少的样式表

@primary_color: green;

.rounded(@radius: 5px) {

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

border-radius: @radius;

}

#container {

background: @primary_color;

.rounded(5px);

div {

color: red;

}

}

 类似资料: