26

私はより少ない使用を検討しています。js（見栄えが良い）ですが、私たちのサイトでは、最初のページの読み込み後に一部のスタイルを動的に読み込む必要があります。ただし、less.jsスクリプトをロードする前に、すべてのLESSスタイルシートをロードする必要があるようです。つまり、これは機能します

<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）ライブラリを使用して、/ 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 に答える