1. ホーム
  2. css

[解決済み】.css ファイルを .less ファイルにインポートする。

2022-04-04 08:59:17

質問

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

私は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 ファイルを作成し、less として扱います。ファイルを less と指定し、拡張子をつけない場合は、何も追加されません。