web-dev-qa-db-ja.com

@importが機能しない

<head>
    <link rel="stylesheet/less" href="less/news.less">
</head>
<body>
    <script src="less.js"></script>
</body>

news.lessは次のようになります。

@import: "libs/base.less"

base.lessは次のようになります。

@import "colors.less";
@import "mixins.less";
@import "bootstap.less";
@import "font-aweseome.less"

body {
    background-color: @light-grey;
}

bootstrap.lessおよびfont-awesome.lessは、拡張子が変更されたCSSファイルです。すべてのファイルは適切なフォルダーにあります。

ブラウザで見ると、base.lessのスタイリングは無視されており、インポートが機能していません。

誰もがヒントを与えることができますか？

ありがとう！

csswebless
23
Kevin Lewis

きみの @importステートメントは、次の形式に従う必要があります。

@import "styles.less";

@import "font-aweseome.less"は、末尾にセミコロンがないため機能していません。

@import: "libs/base.less"は、importステートメントの後にコロンがあるため機能しません。

47
jonschlinkert

なぜコロン：

@import: "libs/base.less"

すべての@ import-sの後にセミコロンを付ける方が良いと思います。

コンソールを見て、パスが正しいこと、およびブラウザーが間違ったURLからより少ないファイルをロードしようとしていないことを確認してください。

3
Tamás Pap

これを試してください： @import url（ 'Your Path'）;

0
Abdul Basit

インポートする

@import "styles.less";
0
Fel