1

LESSは、import-onceを使用しているにもかかわらず、異なるファイル間で同じLESSをインポートしています。

例えば：

<link rel="stylesheet/less" type="text/css" href="app.less">
<link rel="stylesheet/less" type="text/css" href="theme.less">

app.less

@import-once "1.less";

body{
    color:blue;
}

theme.less

@import-once "1.less";

body{
    color:pink;
}

生成：

<style type="text/css" id="less:good-docs-less-app">
    body {
        background: yellow;
    }
    body {
        color: blue;
    }
</style>

<style type="text/css" id="less:good-docs-less-theme">
    body {
        background: yellow;
    }
    body {
        color: pink;
    }
</style>

body{background:yellow}両方のスタイルで重複していることに気づきました。これを2回書き込むことなく、両方のLESSファイルにインポートすることは可能ですか？

4

2 に答える 2

2

私が知っているわけではありません。ただし、すべての LESS コードを 1 つのファイルにコンパイルすることをお勧めします。そうすることで、サーバーへの呼び出しの数も 1 つ減ります。つまり、ページの速度がわずかに最適化されます。

私が関与しているプロジェクトでは、すべての LESS に対して 1 つのマスター ファイルを使用する傾向があるため、すべてのスタイルが 1 つの CSS ファイルにコンパイルされます。

例：

  • styles.less はマスター ファイルです。独自にスタイルを定義するのではなく、インポート ステートメントのみを含む
  • variables.less には、プロジェクト全体で使用されるいくつかの一般的な変数が含まれています。それらは一度定義され、どこでも再利用されます。例: 色、フォント、見出しなど
  • 実際のスタイルを含むいくつかのファイル。コードの重複を避けるために、可能な限り LESS mixin を使用してください。

一方、スタイル定義の重複はそれほど深刻ではありません。CSS スタイル定義は相互に上書きされるため、順序に注意してください。

お役に立てれば...

于 2013-01-29T22:47:44.577 に答える
1

あなたは何をするのか誤解してimport-onceいます。コードがその .less コード内でコンパイルされているため、インポートが再び発生するのを防ぎます。しかし、あなたtheme.lessがapp.lessそれらをあなたの<html>. それまでに、app.lessはすでに作業を完了し、css の最初のセクションを作成しています。

そのため、特定のファイル内でimport-once2 回目のインポートが行われないようにするだけです。たとえば、これがあった場合：.lessapp.less

@import-once "1.less";
@import "theme.less";

body{
    color:blue;
}

の1.lessファイルはtheme.less、app.less. この時点で、コンパイル中に LESS コードの内部にいます。これは、 内の 2 つの連続<link>したコマンドには当てはまりません<html>。

phammer が投稿で述べたように、解決策は、すべての LESS を 1 つのマスター CSS ファイルにコンパイルして、html にリンクすることです。このようにして、すべての LESS コードを「まとめて」保持します (したがって、import-once期待どおりに認識されます)。

于 2013-01-29T23:32:05.327 に答える