少加载.js规则动态规则

StackOverflow https://stackoverflow.com/questions/3175013

  •  02-10-2019
  •  | 
  •  

题

我正在考虑使用 较少的.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似乎都不会尝试加载“样式。没有”，则它会失败。除非正确订购。订购要求明确指出 本教程.

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

注意 这个博客 描述“手表”功能 -

每当您节省较少的代码时，它将自动消除CSS

因此，似乎可以合理地期望我可以在页面加载后添加更少的规则。感觉就像我缺少一些东西。

干杯，

科林

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

<!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;
  }
}
有帮助吗？

解决方案

我刚刚推了1.0.31-它有一种方法： less.refreshStyles() 会重新编译 <style> 标签 type="text/less" - 尝试一下，让我知道它是否有效。

其他提示

感谢您问这个问题 - 对我有很大帮助。我只是在更新主题，以说明如何动态添加CSS文件。

我使用了LIST（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();

您可以将此轻巧（3K）库用于 懒负载少 / CS和JS文件 （免责声明：我是作者）。

这很简单：

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

它还可以接收回调，加载更多具有依赖项的资产，并照顾缓存。

我找到了该脚本的最新版本，可与较少的文件完美地工作：

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

而是使用

less.refreshStyles()

采用

less.refresh()
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top