Less.js: 使用源地图，插件和并行编译较少文件时缺少选择器

@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输出：无选择器

变量@{bundle-root-class}是settingBundle 。 看起来第一行中的变量未编译？

仍然找不到简单的再现。 非常奇怪的是，当触发热模块替换并且更改后的文件的编译输出似乎正确时。 而且问题仅在选择器插值时发生：

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

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

编译为：

{
  val: foo;
}

（请注意，整个选择器都丢失了，不仅是内插的部分。）

@Justineo

更改后的文件的编译输出似乎是正确的

您可以再扩展一点吗？ Less的编译输出似乎是正确的，但是没有正确替换它？

非常奇怪的是，当触发热模块替换并且更改后的文件的编译输出似乎正确时。

@Justineo这是一个有用的线索。 这可能与以下解决方案有关： https :

简而言之，曾经有一段时间从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会导致此问题

@马修院长🙏

@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-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，其中包含此修复程序。