Less.js: ソースマップ、プラグインを使用し、Lessファイルを並行してコンパイルするときにセレクターがありません

@TopGrdこれだけでは十分ではありません。特に、Lessが管理していないパッケージのエラーの場合はなおさらです。 最小限のテストケースでテストリポジトリを作成できますか？ また、このエラーは、 lesscを使用してLessコードをコンパイルしたときに発生しますか？

v3.13.0-3.12.2でも同様の問題が発生しています。

これは巨大なプロジェクトであるため、少ないファイルのどこでこれが発生したかを見つけることはほぼ不可能です。

@endbay @TopGrd

ここで何が期待されているのかわかりません。 再現可能な例がなく、Less自体にエラーがスローされないため、解決に希望はありません。 誰かがそのエラーにブレークポイントを設定し、どのセレクターが予期されていたのか、なぜそれが存在しないのかを確認する必要があります。

@TopGrd

1つの手がかり、このLessコードは無効です：

    @root-name: business-bundle
    /* other file */
    .@{root-name} .wrapper{
        /* css... */
    }

@root-name: business-bundleセミコロンがありません。 したがって、エラーを予期しているライブラリがLessの上に階層化されていて、ライブラリが見つからず、先に進んでLessの出力を解析しようとしますが、この「セレクタがありません」エラーで失敗する可能性があります。 私には見るべきレポがないので、それは単なる推測です。

3.13.0でも同様の問題が発生しています。 （それでも最小限の複製を見つけようとしています。）

関連するコードは次のようになります。

// button.less
<strong i="7">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="10">@import</strong> "./vars"; // where <strong i="11">@prefix</strong> is defined

これは次のようにコンパイルされます：

{
  color: red;
}

:hover {
  color: blue;
}

コンパイルエラーが発生しなかったのはおかしいです。

@ matthew-deanエラーが発生した非常に巨大なプロジェクトです。 デモで再現しようとしています

@TopGrd

1つの手がかり、このLessコードは無効です：

  @root-name: business-bundle
    /* other file */
  .@{root-name} .wrapper{
      /* css... */
  }

@root-name: business-bundleセミコロンがありません。 したがって、エラーを予期しているライブラリがLessの上に階層化されていて、ライブラリが見つからず、先に進んでLessの出力を解析しようとしますが、この「セレクタがありません」エラーで失敗する可能性があります。 私には見るべきレポがないので、それは単なる推測です。

@ root-name：business-bundle; 申し訳ありませんが、これは私のコードです。 セミコロンが付いています。

3.13.0でも同様の問題が発生しています。 （それでも最小限の複製を見つけようとしています。）

関連するコードは次のようになります。

// button.less
<strong i="8">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="11">@plugin</strong> "~some-less-plugin"; // where <strong i="12">@prefix</strong> is injected which preprocessing plugins

これは次のようにコンパイルされます：

{
  color: red;
}

:hover {
  color: blue;
}

コンパイルエラーが発生しなかったのはおかしいです。

style-resources-loaderを使用して、いくつかのグローバル変数も挿入します。 多分それはそれと関係がありますか？

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

私のコード：

デバッガーless.render出力：セレクターなし

変数@{bundle-root-class}はsettingBundleです。 最初の行の変数がコンパイルされていないように見えますか？

それでも単純再生産を見つけることはできません。 ホットモジュールの交換がトリガーされ、変更されたファイルのコンパイルされた出力が正しいように見えるのは非常に奇妙です。 また、問題はセレクター補間でのみ発生します。

<strong i="6">@import</strong> "./lib.less";

.@{prefix}-button {
  val: @prefix;
}

コンパイル先：

{
  val: foo;
}

（補間された部分だけでなく、セレクター全体が欠落していることに注意してください。）

@Justineo

変更されたファイルのコンパイルされた出力は正しいようです

これについてもう少し詳しく説明していただけますか？ Lessからのコンパイル済み出力は正しいようですが、正しく置き換えられていませんか？

ホットモジュールの交換がトリガーされ、変更されたファイルのコンパイルされた出力が正しいように見えるのは非常に奇妙です。

@Justineoこれは役立つ手がかりです。 これはおそらくこれの解決に関連しています： //github.com/less/less.js/issues/3434

つまり、ツリーキャッシュはしばらくの間、Lessから削除されましたが、一部のシナリオではパフォーマンスに悪影響が大きすぎるように思われたため、元に戻しました。したがって、Lessがインポートツリーの一部の状態をリセットしていない可能性があります。 、これは、less.parseが複数回呼び出される「ライブ」環境でのみ問題を引き起こします。 うーん、その理論を複製でテストできるかしら。

@Justineo @TopGrd @endbay

残念ながら、私はまだこの問題を再現できないため、デバッグできません。 ☹️誰かが簡単に再現できるリポジトリを作成できれば、私はそれをステップスルーすることができます。

3.13.0でも同様の問題が発生しています。 （それでも最小限の複製を見つけようとしています。）
関連するコードは次のようになります。

// button.less
<strong i="9">@import</strong> "./lib.less";

.@{prefix}-button {
  color: red;

  &:hover {
    color: blue;
  }
}

// lib.less
<strong i="12">@plugin</strong> "~some-less-plugin"; // where <strong i="13">@prefix</strong> is injected which preprocessing plugins

これは次のようにコンパイルされます：

{
  color: red;
}

:hover {
  color: blue;
}

コンパイルエラーが発生しなかったのはおかしいです。

style-resources-loaderを使用して、いくつかのグローバル変数も挿入します。 多分それはそれと関係がありますか？

{
  test: /\.less$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true,
      },
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'),
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          paths: [path.resolve(cwd, 'node_modules')],
        },
      },
    },
    {
      loader: 'style-resources-loader',
      options:{
            patterns: path.resolve(
              cwd,
              './node_modules/@somemodule/style/index.less',
            ),
            injector: 'prepend',
          },
    },
  ],
},

+1

@plugin + sourcemapが少ないと、この問題が発生します

@matthew-dean🙏

@PengJiyuanクローン可能なリポジトリで再現可能な例を作成できますか？

+1

このコードが原因だと思います。 ツリーノードのfileInfoが間違っている並列の場合、inputSourceが未定義になります。

+1

このコードが原因だと思います。 ツリーノードのfileInfoが間違っている並列の場合、inputSourceが未定義になります。

@ matthew-deanちょっと待って、ミニリポジトリを作成します。 このコード行を見つけました。すぐに解決できることを願っています...

+1

このコードが原因だと思います。 ツリーノードのfileInfoが間違っている並列の場合、inputSourceが未定義になります。

このコード行は3.10.0以降に登場しています

@PengJiyuanクローン可能なリポジトリで再現可能な例を作成できますか？

https://github.com/kirazxyun/less-question

このリポジトリは問題を再現できます。 'npm run build'を使用して実行し、distフォルダーに結果を表示できます。

@PengJiyuanクローン可能なリポジトリで再現可能な例を作成できますか？

https://github.com/kirazxyun/less-question

このリポジトリは問題を再現できます。 'npm run build'を使用して実行し、distフォルダーに結果を表示できます。

@ matthew-ディーン

@ matthew-dean @pluginを使用して

@PengJiyuanそうです、ソースマップの構築が機能しない場合でも、問題のコードはチャンクの出力に失敗することはありません。 次のようになります。

                if (inputSource === undefined) {
                    this._css.push(chunk);
                    return;
                }

これは短期的な修正であり、長期的な修正では、ファイルの1つに誤ったインポートマッピングがある理由が解明されます。 （並行してコンパイルすると、おそらく再利用されます。）

だから私はすぐに一時的なバンドエイドの解決策を実行し、後で原因を突き止めることができます。

@PengJiyuan @ kirazxyun @ Justineoなど[email protected]テストしてみてください

[email protected]で問題が解決し

@ matthew-dean動作します、ありがとう🙏

@ matthew-deanは、問題が[email protected]で解決されることを確認し、まもなく公式リリースを期待しています

[email protected]で解決され

3.13.1公開

この修正を含む4.0.0も公開されています。