css - CSS インポートの問題が少ない

Question

ここでは Less CSS を扱っています。すべてが順調に進んでいましたが、今は小さなバグが発生しています。ファイルが 2 つ少なくなりました。1 つ目は「colors.less」と呼ばれ、ここで色変数を宣言し、2 つ目は css 構造です。

そのようなもの：

無色

@black: #000;

スタイル.レス

@import "color";

body {
    background: @black;
}

私の頭のタグでは、私はそれを書いています：

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>

そしてもちろん、less js をインポートします。

何が起こっているのかというと、黒を白 (#fff) に変更すると、白に変わりません。黒のまま。ロジックを逆にして、色の中にスタイルをインポートすると、色は変わりますが、私のスタイルは変わりません。

何が間違っているのですか？

みんなありがとう！

score 5 · Accepted Answer

使用する

@import "color.less";

これにより、問題が確実に解決されます。これで問題が解決しない場合は、色に赤い色を使用してみてください。ブラウザのデフォルトの色が黒の場合、スタイルが読み込まれていないかどうかがわかりません。

PS: color.less や colorS.less などのファイル名を確認してください。

score 2 · Accepted Answer

LESS は css 構文を使用するため、ファイル拡張子が必要です。

@import "color.less";

score 0 · Accepted Answer

colorメイン内にあり、stylesheet2番目を参照しないでくださいsheet。

次に、をスキップできます@import。

また、スタイルには別の名前を付けruleます。色を変更することにした場合、ルール名は意味をなしません。

score 0 · Accepted Answer

何が原因なのかはわかりませんが、<head>次のように yout -tagで両方のファイルを参照してみてください。

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>
<link rel="stylesheet/less" type="text/css" href="less/color.less"/>

そして、すでにタグでそれを行っているので、style.lessインポートしないように変更します。color.less<head>

ところで: 私は color とは呼びません @black。これは、後で色を変更するときに混乱を招く可能性が@mainBackgoundColorあります。代わりに、よりわかりやすい名前を使用して、読みやすいコードを取得してください。

score -6 · Accepted Answer

インポートするファイルには、.css 拡張子が必要です。.less 拡張子を持つことができるのは、含まれている、または取得しているファイルだけです。

この例では、カラーファイルの拡張子は .less ではなく .css にする必要があります。これで問題が解決するはずです。

**更新はFirefoxではなくChromeで機能しました?? 変。

5 に答える 5