Less.js: Отсутствует селектор при использовании исходных карт, плагинов и параллельной компиляции файлов Less

@TopGrd Этого действительно недостаточно, особенно когда это ошибка в пакете, который Less не поддерживает. Можете ли вы сделать тестовое репо с минимальным тестовым набором? Кроме того, возникает ли эта ошибка, когда вы просто используете lessc для компиляции кода Less?

У меня аналогичная проблема с v3.13.0 - 3.12.2.

Это огромный проект, поэтому почти невозможно найти, где в меньшем файле это произошло.

@endbay @TopGrd

Я не уверен, что здесь ожидается. Без воспроизводимого примера и с ошибкой, не выданной в самом Less, нет никакой надежды на разрешение. Кому-то нужно будет установить точку останова при этой ошибке и посмотреть, какой селектор ожидался и почему его нет.

@TopGrd

Одна подсказка, этот код 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

Одна подсказка, этот код Less недействителен:

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

@root-name: business-bundle отсутствует точка с запятой. Так что, возможно, у вас есть какая-то библиотека, расположенная поверх Less, которая ожидает ошибки, не находит ее и пытается продолжить и проанализировать вывод Less, но терпит неудачу с этой ошибкой «отсутствует селектор». Это всего лишь предположение, поскольку у меня нет репо, на которое можно было бы смотреть.

@ root-name: бизнес-пакет; Извините, это мой код. В нем есть точка с запятой.

У меня аналогичная проблема возникает в версии 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 output: нет селектора

Переменная @{bundle-root-class} равна settingBundle . Похоже, переменные в первой строке не компилируются?

До сих пор не могу найти простого воспроизведения. Очень странно, что когда срабатывает горячая замена модуля, и скомпилированный вывод измененного файла кажется правильным. И проблема возникает только при интерполяции селектора:

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

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

Компилируется в:

{
  val: foo;
}

(Обратите внимание, что отсутствует весь селектор, а не только интерполированная часть.)

@Justineo

скомпилированный вывод измененного файла кажется правильным

Можете ли вы подробнее рассказать об этом? Скомпилированный вывод Less кажется правильным, но он не заменяется правильно?

Очень странно, что когда срабатывает горячая замена модуля, и скомпилированный вывод измененного файла кажется правильным.

@Justineo Это полезная подсказка. Вероятно, это связано с решением этого вопроса :

Короче говоря, древовидное кеширование было удалено из 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

Я думаю, что проблема вызвана этим кодом. Узел дерева имеет неправильную информацию о файле. В случае параллельного выполнения, из-за которого inputSource не определен.

+1

Я думаю, что проблема вызвана этим кодом. Узел дерева имеет неправильную информацию о файле. В случае параллельного выполнения, из-за которого inputSource не определен.

@ matthew-dean Погодите, мы создаем мини репо. Мы нашли эту строку кода, надеемся помочь вам быстро ее решить ...

+1

Я думаю, что проблема вызвана этим кодом. Узел дерева имеет неправильную информацию о файле. В случае параллельного выполнения, из-за которого 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-dean Мы используем @plugin, и он влияет на все наши проекты, пожалуйста, помогите нам 🙏

@PengJiyuan Вы правы, рассматриваемый код не должен давать сбой при выводе блока, если построение исходной карты не работает. Должно получиться так:

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

Это будет краткосрочное исправление, а долгосрочное исправление заключается в выяснении, почему один из файлов имеет неправильное сопоставление импорта. (Вероятно, он повторно используется при параллельной компиляции.)

Так что скоро я смогу наложить временный пластырь, а потом выяснить причину.

@PengJiyuan @kirazxyun @Justineo и т. Д. Попробуйте протестировать с помощью [email protected]

Проблема решена с помощью [email protected]. Спасибо, Мэтт!

@ matthew-dean Это работает, спасибо 🙏

@ matthew-dean подтвердите, что проблема решена с помощью [email protected] , надеясь на

Это решается с помощью [email protected].

3.13.1 опубликовано

Также опубликована версия 4.0.0, которая содержит это исправление.