web-dev-qa-db-ja.com

.lessファイルを単一の.lessファイルにインポートできないのはなぜですか？

私のファイルの構造は次のとおりです。

_lib/css/..._には、各領域ごとに単一の.lessファイルに分割されたスタイルが含まれています。

_lib/style.less_は、サブスタイルファイルを収集するファイルであり、HTMLにリンクするファイルです。

（_style.less_に）入力すると：

@import url("/css/StyleToImport.less");

または

_@import "/css/StyleToImport.less";_

...構文エラーが発生します。

.lessファイルを1つのファイルに結合することは本当に不可能ですか？

色や寸法などのすべての変数を含む1つのファイルを用意すると、非常に便利です。

しかし、現状では、HTMLで_<link ...>_タグをすべてのファイルに使用する必要があります。これはあまり便利ではありません。

追伸私は読んだ 2つの.lessファイルを1つのcssファイルに結合する

そして私はこれを読んだ：

インポート

インポートはほぼ期待どおりに機能します。 .lessファイルをインポートすると、その中のすべての変数が使用可能になります。ファイルが.lessの場合、拡張子はオプションです。

@import "ライブラリ";

@import "typo.css";

cssless
18
KristianB

私はこれを私のローカル環境で試してみました。変数をvars.lessに入れ、ミックスインをconf.lessに入れました。基本的な.lessファイルがすべての「インクルード」を含むフォルダーの下のレベルにある、あなたのファイル構造と同様のファイル構造。

つまり、main.lessファイルとcss/less/vars.less | conf.lessがあるcssフォルダがありました。

これらの両方をインポートするには：

@import "less/vars.less";
@import "less/conf.less";

私の唯一の答えは、/ステートメントの最初の@importを削除することです。 Googleフォントを.lessファイルにインポートしようとすると、同様の問題が発生しました。

あなたの鉱山と同じ構造を使用しているので、少なくとも一撃の価値はあります。

29
Daniel

インポートが静かに失敗するように見える、同様の問題がありました。 この質問 で説明されているように、私のエディターが@ import-edファイルをBOM付きのUTF-8として保存していることがわかりました。

何らかの理由で、LESSコンパイラは、rootファイルにエラーがある場合でも、BOMを含む@ import-edファイルを警告なしでチョークしますBOM。

BOMなしで@ import-edファイルを再保存してみてください。

5
Chris Jaynes

/ directoryにリンクしているため、ルートから上から下に検索し、この場合は見つかりません。したがって、@ Danielは、スラッシュを削除するように提案することで正しいです。

そのようにリンクする必要があります：

@import url("css/StyleToImport.less");

これは、開始点がcssディレクトリ自体の中にあり、そのディレクトリcss /をポイントして、ファイル自体をポイントしているためです。

最初にディレクトリを上に移動し、次に上下に移動する必要がある場合は、

../directory/file.less
1
Marlyse Comte

エラーなしで何が問題なのか正確にはわかりません。

Lessapp、 http://incident57.com/less/ を使用することをお勧めします。これは非常にうまく機能し、使用が少し簡単です。また、空のファイルをインポートしようとするとエラーが発生する可能性があるため、注意が必要です。

プロジェクトに応じてファイルを構造化するために使用するいくつかの基本的なコードをアップロードしました。それらは https://github.com/danethurber/seamLESS で入手できます。多分それは助けることができ、あなたや誰かが貢献したいなら私は助けて幸せです:)

1
dane