web-dev-qa-db-ja.com

.cssファイルを.lessファイルにインポートします

.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ファイルのみをインポートしますか？それとも間違って参照していますか...？！

cssimportless
210
Mr Jonny Wood

オプションを指定することで、ファイルを特定のタイプとして解釈させることができます。例：

@import (css) "lib";

出力します

@import "lib";

そして

@import (less) "lib.css";

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

301
Fractalf

CSSを処理せずに出力にコピーする場合は、 (inline) directive を使用できます。例えば。、

@import (inline) '../timepicker/jquery.ui.timepicker.css';
234
mpen

Cssファイルのファイル拡張子を.lessに変更します。その中にLESSを書く必要はありません。すべてのCSSは有効なLESSです（エスケープする必要があるMSのものを除きますが、それは別の問題です）。

ごと フラクタルの答え これはv1.4.0で修正されました

28
Mathletics

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

@import (less) "foo.css"

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

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

27
Gudradain

LESS Webサイト から：

CSSファイルをインポートし、LESSで処理したくない場合は、拡張子.cssを使用します。

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

以下のコメントでjitbitが指摘しているように、貴重な帯域幅を消費する不要な@importsを持ちたくないので、これは本当に開発目的にのみ役立ちます。

8
Quantastical

これを試してください：

@import "lib.css";

公式文書から：

Cssとそれ以下のファイルの両方をインポートできます。処理されるファイルインポートステートメントは少なく、cssファイルインポートステートメントはそのまま保持されます。 CSSファイルをインポートし、LESSで処理したくない場合は、拡張子.cssを使用します。

出典：http://lesscss.org/

7
Dr.Kameleon

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

my.less

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

reference.css

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

* lessc my.less out/my.cssを使用した結果（my.css）*

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

私はlessc 2.5.3を使用しています

6
hinneLinks

以下として扱う必要のあるcssファイルをインポートする場合は、次の行を使用します。

.ie {
  @import (less) 'ie.css';
}
4
Charles

1.5.0以降では、「インライン」キーワードを使用できます。

例：@import（inline） "not-less-compatible.css";

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

（ソース： http://lesscss.org/features/#import-directives-feature ）

3
Pieter-Jan