Less.js: 소스 맵, 플러그인을 사용하고 Less 파일을 병렬로 컴파일 할 때 선택기가 누락 됨

@TopGrd 그것은 계속 진행하기에 충분하지 않습니다. 특히 Less가 유지하지 않는 패키지의 오류 인 경우 더욱 그렇습니다. 최소한의 테스트 케이스로 테스트 저장소를 만들 수 있습니까? 또한 Less 코드를 컴파일하기 위해 lessc 를 사용하는 경우에도이 오류가 발생합니까?

v3.13.0-3.12.2에서도 비슷한 문제가 발생했습니다.

이것은 거대한 프로젝트이므로 적은 파일에서 이런 일이 발생한 곳을 찾기가 거의 불가능합니다.

트윗 담아 가기

나는 여기서 무엇을 기대하는지 잘 모르겠습니다. 재현 가능한 예가없고 Less 자체에서 오류가 발생하지 않는 경우 해결책에 희망이 없습니다. 누군가 해당 오류에 중단 점을 설정하고 예상 한 선택기가 무엇이고 왜 나타나지 않는지 확인해야합니다.

헉

단서,이 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 오류가 발생한 매우 거대한 프로젝트입니다. 데모에서 재현하려고합니다

뿡뿡

단서,이 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;
}

(보간 된 부분뿐만 아니라 전체 선택기가 없습니다.)

헉헉

변경된 파일의 컴파일 된 출력이 올바른 것 같습니다.

이것에 대해 조금 더 확장 할 수 있습니까? Less에서 컴파일 된 출력이 올바른 것 같지만 올바르게 대체되지 않습니까?

핫 모듈 교체가 트리거되고 변경된 파일의 컴파일 된 출력이 올바른 것처럼 보이는 것은 매우 이상합니다.

@Justineo 이것은 유용한 단서입니다. 이 문제의 해결 방법과 관련이있을 수 있습니다. https://github.com/less/less.js/issues/3434

간단히 말해, 트리 캐싱은 Less에서 한동안 제거되었지만 일부 시나리오에서는 성능에 너무 부정적인 영향을 미치는 것 같아서 다시 넣었습니다. Less가 일부 임포트 트리 상태를 재설정하지 않을 수 있습니다. 이는 less.parse가 여러 번 호출되는 "라이브"환경에서만 문제를 유발합니다. 음, 그 이론을 재생산으로 테스트 할 수 있는지 궁금합니다.

트윗 담아 가기

안타깝게도 여전히이 문제를 재현 할 수 없으므로 디버깅 할 수 없습니다. ☹️ 누군가 쉽게 재현 할 수있는 repo를 만들 수 있다면 단계별로 진행할 수 있습니다.

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-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도 게시되었습니다.