web-dev-qa-db-ja.com

「variables.less」がインポートされても、変数名エラー「is undefined」

今日からLESSを使い始めました。しかし、それはちょっと奇妙です。このコードは機能しません。エラーが発生します：

! Variable Name Error: @linkColor in a is undefined.

私のブートストラップ：

@import "variables.less";
@import "normalize.less";

variables.less：

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less：

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

私が作るとき

@import "variables.less"

normalize.lessファイルでは、すべて正常に機能します。

ご協力いただきありがとうございます ：）

cssless
47
conradkdotcom

この他の質問 最終的に正しい答えに私を導いた。

ファイルがBOMでエンコードされている場合、LESSコンパイラは静かに失敗しているように見えます。 （これは Byte Order Mark という用語に慣れていない人向けです。）これは、Visual Studioなどの一部のエディターのデフォルト設定です。

コンパイラは、BOMがルートファイルにある場合、BOMでエラーを発生させますが、@ import-edファイルの場合、サイレントに失敗するようです。

ファイルをBOMなしでUTF-8として保存してみて、問題が解決するかどうかを確認してください。

31
Chris Jaynes

別の考えられる根本的な原因があるかもしれません。

オリジナルのGruntfile.jsは次のとおりです。

less: {
      compile: {
        files: {
          'css/less.css': 'less/**/*.less'
        }
      }
    },

ワイルドカードにより、LESSコンパイラーはそのフォルダーの下にあるすべての.lessファイルをコンパイルし、すべての結果を1つのCSSにマージします。そして、grunt less:compile：

NameError：.transitionは、38行3列のless/core/html.lessで未定義です

変更したら'less/**/*.less' into 'less/css.less'、コンパイルは成功します。

6
Evi Song

このエラーは、インポートするファイルの不正なインポートでも発生する可能性があります。

また、インポートの複数のレイヤーとNode.jsの「lessc」コンパイラーを使用しているときに、この問題が発生しました。

  • 元のファイルがファイルをインポートしました（これを「子」と呼びます）
  • 子ファイルはファイルをインポートしました（これを「孫」と呼びます）
  • 孫が輸入されました

元のファイルをコンパイルしようとしましたが、同じ「未定義変数」の動作を受け取りました。変数が子で定義され、構文が正しいように見えました。

以前のエラーは表示されませんでした。

問題は、子供が孫を適切にインポートしていないことでした。すなわち、

@import grandchild.less

のではなく：

@import "grandchild.less";

孫をインポートする子を修正すると、元の子に子で定義された変数が表示されます。

これはlessのバグのようです。つまり、不正なインポートは 'lessc'出力に表示されるはずなので、いつかは修正されるでしょう。それまでは、これが役立つことを願っています。

5
mikemaccana

Winlessコンパイラを使用して同じ問題が発生しました。

Master.lessにインポートしていた一部の.lessファイルは空でした。インポートしたファイルのリストからこれらを削除すると、変数が認識されました！

5
Adam

これに遭遇する可能性のある他の人が複数のインポートから生成された重複したCSSを望まないようにするには、2つのオプションがあります。

  1. 使用する必要のある各ファイルで必要な変数/ミックスインファイルを@ import-onceしてください。

    つかいます @import-once "filename.less";重複を防ぎます。

  2. 到着したら、LESS> 1.4.0にアップグレードします。以下のウェブサイトから：

    "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."

1
Austen Cameron

また、ファイルを2回インポートしようとしている場合（この方法はお勧めできません）、最初のインポートがyour.lessファイルで参照されている変数がロードされる前である場合にも、このエラーが発生する可能性があります

注：私はDjango compressを使用しています

index.htmlにあった：

{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}

その後、styles.lessで私は持っていました

...
@import "timepick.less";
1
lukeaus

これは、どのマスターレスファイルをコンパイルしているためだと思います。同様に

Less/Project_name/project.lessがあり、このproject.lessにある場合、変数lessおよびディレクトリにある他のすべてのファイルをインポートします。

すべてのファイルではなく、project.lessをcssにコンパイルするだけです。一度にproject.lessとvariables.lessをコンパイルしようとすると、このエラーが発生します。そして、変数レスファイルをインポートする冗長な宣言を避けることができます

1
Saurabh Kalantri

これが発生するもう1つの奇妙な特定の状況：.NETとドットレスを使用している場合、コンパイラは変数指定子を使用してネストされたメディアクエリを停止します。このようなコードがある場合：

@media (min-width: @aVariable) {
    .some-class{
        margin: 10px;

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

...その後、dotlessは、@ anotherVariableの定義が見つからないことを通知します。たとえ3行以上使用されていてもです。

0
The Digital Gabeg

私にとっては、@ Import-onceを使用したときに起こりましたが、何も役に立ちません。しかし、@ Importでは機能しました。

lessの最後のバージョンで読んだように、Importは1回インポートとして機能します。

0
amichai

Normalize.lessでネストされたルールを使用します。

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

また、@ importでは、「。less」を使用する必要はありません。オプションです。

@import "variables";
@import "normalize";

これが役立つかどうかわかりません...

0
Stef