Parcel이 미디어 쿼리를 잘못 다시 작성합니다.

Question

현재 Parcel 2.8.3 및 @parcel/transformer-sass 2.8.3을 사용하고 있지만 미디어 쿼리를 다시 작성하는 방식에 몇 가지 문제가 있습니다. Parcel을 사용한 이전 프로젝트에서는 그러한 문제가 없었고 모든 것이 예상대로였습니다.

SASS 파일은 다음과 같습니다.

h1 {
  색상: 빨간색;
}

@미디어 전용 화면 및 (최대 너비: 40em) {
  h1 {
    파란색;
  }
}

CSS 출력은 다음과 같습니다.

h1 {
  색상: 빨간색;
}

@media 전용 화면 및 (너비 <= 40em) {
  h1 {
    색상: #00f;
  }
}

보시다시피 CSS 파일의 미디어 쿼리가 max-width에서 width <= 40em으로 변경되었는데, 이는 실제 휴대폰에서 볼 때 작동하지 않습니다.

1개월 전 프로젝트에서 복사한 package-lock.json 및 package.json을 사용하면 미디어 쿼리가 예상대로 다시 작성됩니다. 위와 같이 새 프로젝트에 대해 npm i Parcel & npm i @parcel/transformer-sass를 실행하면 프로젝트를 시작할 때 모든 미디어 쿼리가 두 번째 코드 블록과 같이 변경됩니다. 어떤 제안이라도 좋을 것입니다.

Answer 1

브라우저 목록을 확장하는 솔루션을 찾았습니다. package.json에 다음을 추가하세요:

으아악

이것은 지원되는 브라우저를 확장하고 덮어쓰지 않고 이전 Safari에서 처리할 수 있도록 보장합니다.