26

我正在考虑使用less。js（看起来很棒），但我们的网站要求在初始页面加载后动态加载某些样式。然而，似乎所有 LESS 样式表都必须在加载 less.js 脚本之前加载。即这有效

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

但是如果换行它会失败，除非它们被正确订购，否则firefox和chrome似乎都不会尝试加载'style.less'。本教程中明确指出了订购要求。

有什么方法可以在初始页面加载后加载更少的样式表？

请注意，此博客描述了“观看”功能 -

每当您保存 LESS 代码时，它都会自动刷新 CSS

所以期望我可以在页面加载后添加一些 LESS 规则似乎是合理的。感觉好像我错过了什么。

干杯，

科林

更新：用于测试注释中描述的行为的代码（脚本后列出的样式表较少）-

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="/static/js/less-1.0.31.min.js"></script> 
  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="#abc">Bingo</div>
</body>

<script>
console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');
//$("head").append(lessStyle);
less.refresh(true);
console.log("refreshed...");
</script>
</html>

和更少的样式表

@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;
  }
}
4

4 回答 4

30

我刚刚推送了 1.0.31——它有一个方法：less.refreshStyles()它将重新编译<style>标签type="text/less"——试试看，如果它有效，请告诉我。

于 2010-07-05T10:38:46.917 回答
11

感谢您提出这个问题——它对我帮助很大。我只是更新主题以展示我如何动态添加 CSS 文件。

我使用了 LESS 的最新版本（1.3.3）。

var stylesheetFile = 'file.css';
var link  = document.createElement('link');
link.rel  = "stylesheet";
link.type = "text/less";
link.href = stylesheetFile;
less.sheets.push(link);

less.refresh();
于 2013-01-09T09:15:42.993 回答
2

您可以使用这个轻量级 (3k) 库来延迟加载 less / css 和 js 文件（免责声明：我是作者）。

这很简单：

lazy.load('/static/less/style.less');

它还可以接收回调，加载更多具有依赖关系的资产并处理缓存。

于 2014-07-07T06:23:08.380 回答
0

我找到了一个与 LESS 文件完美配合的最新版本的脚本：

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

而是使用

less.refreshStyles()

利用

less.refresh()
于 2018-10-17T08:18:10.323 回答