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

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

@import (css) "lib";

出力されます

@import "lib";

そして

@import (less) "lib.css";

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

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

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

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

@import (less) "foo.css"

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

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

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

パーFractalfの答えこれは1.4.0で修正されています

LESSウェブサイトから：

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

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

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

これを試して ：

@import "lib.css";

公式ドキュメントから：

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

出典： http : //lesscss.org/

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

私の少ない

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

reference.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

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

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

1.5.0以降、uは 'inline'キーワードを使用できます。

例：@import（インライン） "not-less-compatible.css";

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

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