Less.js: Fehlende Auswahl bei Verwendung von Quellkarten, Plugins und parallelem Kompilieren von Less-Dateien

@TopGrd Das reicht wirklich nicht aus, um lessc zum Kompilieren Ihres Less-Codes verwenden?

Ein ähnliches Problem mit v3.13.0 - 3.12.2 funktioniert auch für mich.

Es ist ein riesiges Projekt, so dass es fast unmöglich ist zu finden, wo in der weniger Datei dies passiert ist.

@endbay @TopGrd

Ich bin mir nicht sicher, was hier erwartet wird. Ohne reproduzierbares Beispiel und ohne den Fehler, der nicht in Less selbst ausgelöst wurde, gibt es keine Hoffnung auf eine Lösung. Jemand muss bei diesem Fehler einen Haltepunkt setzen und sehen, welcher Selektor erwartet wurde und warum er nicht vorhanden ist.

@ TopGrd

Ein Hinweis, dieser Less-Code ist ungültig:

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

@root-name: business-bundle fehlt ein Semikolon. Es kann also sein, dass Sie eine Bibliothek über Less gelegt haben, die einen Fehler erwartet, keinen findet und versucht, die Ausgabe von Less zu analysieren, aber mit diesem "fehlenden Selektor" -Fehler fehlschlägt. Das ist nur eine Vermutung, da ich kein Repo zum Anschauen habe.

Ich habe ein ähnliches Problem in 3.13.0. (Ich versuche immer noch, eine minimale Reproduktion herauszufinden.)

Der zugehörige Code sieht folgendermaßen aus:

// 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

Welches ist zusammengestellt als:

{
  color: red;
}

:hover {
  color: blue;
}

Es ist seltsam, dass kein Kompilierungsfehler aufgetreten ist.

@ matthew-dean Es ist ein sehr großes Projekt, bei dem ein Fehler aufgetreten ist. Ich versuche es in einer Demo zu reproduzieren

@ TopGrd

Ein Hinweis, dieser Less-Code ist ungültig:

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

@root-name: business-bundle fehlt ein Semikolon. Es kann also sein, dass Sie eine Bibliothek über Less gelegt haben, die einen Fehler erwartet, keinen findet und versucht, die Ausgabe von Less zu analysieren, aber mit diesem "fehlenden Selektor" -Fehler fehlschlägt. Das ist nur eine Vermutung, da ich kein Repo zum Anschauen habe.

@ root-name: business-bundle; Entschuldigung, das ist mein Code. Es hat ein Semikolon.

Ich habe ein ähnliches Problem in 3.13.0. (Ich versuche immer noch, eine minimale Reproduktion herauszufinden.)

Der zugehörige Code sieht folgendermaßen aus:

// 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

Welches ist zusammengestellt als:

{
  color: red;
}

:hover {
  color: blue;
}

Es ist seltsam, dass kein Kompilierungsfehler aufgetreten ist.

Ich benutze Style-Resources-Loader, um auch einige globale Variablen einzufügen. Vielleicht hat es etwas damit zu tun?

{
  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',
          },
    },
  ],
},

Mein Code:

Debugger less.render Ausgabe: kein Selektor

Die Variable @{bundle-root-class} ist settingBundle . Es sieht so aus, als wären die Variablen in der ersten Zeile nicht kompiliert?

Ich kann immer noch keine einfache Reproduktion finden. Es ist sehr seltsam, dass beim Auslösen des Hot-Module-Austauschs die kompilierte Ausgabe der geänderten Datei korrekt zu sein scheint. Und das Problem tritt nur bei der Selektorinterpolation auf:

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

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

Kompiliert zu:

{
  val: foo;
}

(Beachten Sie, dass der gesamte Selektor fehlt, nicht nur der interpolierte Teil.)

@ Justinineo

Die kompilierte Ausgabe der geänderten Datei scheint korrekt zu sein

Können Sie das etwas näher erläutern? Die kompilierte Ausgabe von Less scheint korrekt zu sein, wird aber nicht korrekt ersetzt?

Es ist sehr seltsam, dass beim Auslösen des Hot-Module-Austauschs die kompilierte Ausgabe der geänderten Datei korrekt zu sein scheint.

@ Justineo Dies ist ein hilfreicher Hinweis. Dies hängt wahrscheinlich mit der Auflösung zusammen: https://github.com/less/less.js/issues/3434

Kurz gesagt, das Zwischenspeichern von Bäumen wurde für einige Zeit aus Less entfernt, aber es schien in einigen Szenarien zu viel negative Auswirkungen auf die Leistung zu haben, also habe ich es wieder eingefügt. Es könnte sein, dass Less daher einige Statusbäume nicht zurücksetzt Dies verursacht NUR ein Problem in einer "Live" -Umgebung, in der less.parse mehrmals aufgerufen wird. Hmm, ich frage mich, ob ich diese Theorie in einer Reproduktion testen kann.

@Justineo @TopGrd @endbay

Leider kann ich dieses Problem immer noch nicht reproduzieren, sodass es nicht debuggbar ist. ☹️ Wenn jemand ein Repo machen kann, wo es leicht reproduzierbar ist, könnte ich es durchgehen.

Ich habe ein ähnliches Problem in 3.13.0. (Ich versuche immer noch, eine minimale Reproduktion herauszufinden.)
Der zugehörige Code sieht folgendermaßen aus:

// 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

Welches ist zusammengestellt als:

{
  color: red;
}

:hover {
  color: blue;
}

Es ist seltsam, dass kein Kompilierungsfehler aufgetreten ist.

Ich benutze Style-Resources-Loader, um auch einige globale Variablen einzufügen. Vielleicht hat es etwas damit zu tun?

{
  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

Weniger @plugin + sourcemap verursacht dieses Problem

@ Matthew-Dean 🙏

@PengJiyuan Können Sie ein reproduzierbares Beispiel in einem klonbaren Repo erstellen?

+1

Ich denke, das Problem wird durch diesen Code verursacht. Der Baumknoten hat eine falsche fileInfo. Im Fall von parallel ist die inputSource undefiniert.

+1

Ich denke, das Problem wird durch diesen Code verursacht. Der Baumknoten hat eine falsche fileInfo. Im Fall von parallel ist die inputSource undefiniert.

@ matthew-dean Moment mal, wir erstellen ein Mini-Repo. Wir haben diese Codezeile gefunden und hoffen, Ihnen bei der schnellen Lösung zu helfen ...

+1

Ich denke, das Problem wird durch diesen Code verursacht. Der Baumknoten hat eine falsche fileInfo. Im Fall von parallel ist die inputSource undefiniert.

Diese Codezeile erscheint seit 3.10.0

@PengJiyuan Können Sie ein reproduzierbares Beispiel in einem klonbaren Repo erstellen?

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

Dieses Repo kann das Problem reproduzieren. Sie können mit 'npm run build' ausführen und dann die Ergebnisse im Ordner dist anzeigen.

@PengJiyuan Können Sie ein reproduzierbares Beispiel in einem klonbaren Repo erstellen?

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

Dieses Repo kann das Problem reproduzieren. Sie können mit 'npm run build' ausführen und dann die Ergebnisse im Ordner dist anzeigen.

@ Matthew-Dean

@ matthew-dean Wir verwenden @plugin und es betrifft alle unsere Projekte, bitte helfen Sie uns 🙏

@PengJiyuan Sie haben Recht, der betreffende Code sollte die Ausgabe des Erstellung der Quellkarte nicht funktioniert. Es sollte so sein:

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

Dies wäre eine kurzfristige Korrektur, wobei die längerfristige Korrektur darin besteht, herauszufinden, warum eine der Dateien eine falsche Importzuordnung aufweist. (Es wird wahrscheinlich wiederverwendet, wenn es parallel kompiliert wird.)

So kann ich bald die vorübergehende Pflasterlösung durchführen und die Ursache danach herausfinden.

@PengJiyuan @kirazxyun @Justineo usw. Bitte versuchen Sie es mit [email protected]

Problem gelöst mit [email protected]. Danke Matt!

@ Matthew-Dean Es funktioniert, danke 🙏

@ matthew-dean bestätigen, dass das Problem mit [email protected] gelöst

Es wird mit [email protected] gelöst

3.13.1 veröffentlicht

Es wird auch 4.0.0 veröffentlicht, das diesen Fix enthält.