235

.css ファイルを .less ファイルにインポートできますか?

私は less にかなり精通しており、すべての開発に使用しています。私は定期的に次のような構造を使用しています。

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

すべてのインポートは他の .less ファイルであり、すべて正常に機能します。

私の現在の問題は次のとおりです。次のように、.css ファイルで使用されるスタイルを参照する .less に .css ファイルをインポートしたいです。

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

.css ファイルには というクラス.typeが含まれていますが、.less ファイルをコンパイルしようとするとエラーが発生しますNameError: .type is undefined

.less ファイルは .css ファイルをインポートせず、他の .less ファイルのみをインポートしますか? それとも、私はそれを間違って参照しています...?!

4

9 に答える 9

329

オプションを指定することで、ファイルを特定のタイプとして強制的に解釈することができます。

@import (css) "lib";

出力します

@import "lib";

と

@import (less) "lib.css";

ファイルをインポートし、lib.css少ないものとして扱います。ファイルを少なく指定し、拡張子を含めない場合、何も追加されません。

于 2013-05-30T08:04:42.223 に答える
30

バージョン1.7.4で以下を使用する必要がありました

@import (less) "foo.css"

受け入れられた答えは知っていますが@import (css) "foo.css"、うまくいきませんでした。新しい less ファイルで css クラスを再利用したい場合は、(less)and ではなく andを使用する必要があります(css)。

ドキュメントを確認してください。

于 2014-09-12T15:32:45.710 に答える
29

css ファイルのファイル拡張子を.less. LESS を記述する必要はありません。すべての CSS は LESS で有効です (エスケープする必要がある MS のものを除きますが、それは別の問題です)。

Fractalfの回答によると、これはv1.4.0で修正されています

于 2012-06-25T20:34:52.983 に答える
8

これを試して ：

@import "lib.css";

公式ドキュメントから：

css ファイルと less ファイルの両方をインポートできます。より少ないファイルのインポート ステートメントのみが処理され、css ファイルのインポート ステートメントはそのまま保持されます。CSS ファイルをインポートしたいが、LESS に処理させたくない場合は、拡張子 .css を使用してください。

ソース: http://lesscss.org/

于 2013-03-05T05:16:23.863 に答える
8

LESSのウェブサイトから：

CSS ファイルをインポートしたいが、LESS に処理させたくない場合は、拡張子 .css を使用してください。

@import "lib.css"; ディレクティブはそのまま残され、最終的に CSS 出力になります。

以下のコメントで jitbit が指摘しているように、@import貴重な帯域幅を不必要に消費させたくないので、これは実際には開発目的でのみ有用です。

于 2012-06-25T20:36:37.250 に答える
6

CSS ファイルを参照としてインポートしたいだけで (例: Mixins でクラスを使用するため) 、結果に CSS ファイル全体を含めない場合@import (less,reference) "reference.css";は、次を使用できます。

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

参照.css

.reference-class{
    border: 1px solid red;
}

*結果 (my.css) lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

私は使用していますlessc 2.5.3

于 2015-12-02T12:35:22.027 に答える
4

1.5.0 以降、「inline」キーワードを使用できます。

例: @import (インライン) "not-less-compatible.css";

これは、CSS ファイルの互換性が劣る可能性がある場合に使用します。これは、Less はほとんどの既知の標準 CSS をサポートしていますが、いくつかの場所でコメントをサポートしておらず、CSS を変更せずにすべての既知の CSS ハックをサポートしていないためです。したがって、これを使用してファイルを出力に含めることができるため、すべての CSS が 1 つのファイルになります。

(ソース: http://lesscss.org/features/#import-directives-feature )

于 2016-04-06T12:27:33.410 に答える