autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0

VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다.

하아... 뭐야... 아 물론 내 소스는 아니다. 난 이미 해결을 했으므로...

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

제목: VSCODE 업데이트 이후 발생하는 에러들과 해결 방법

부제: autoprefixer 경고, flex 속성 에러, Node-sass 버전 호환성 에러

소개

VSCode 업데이트 이후 많은 사용자들이 갑작스럽게 에러 메시지를 마주하게 되었습니다. 이 포스트에서는 주로 발생하는 세 가지 문제와 해당 문제를 해결하는 방법을 다루겠습니다. autoprefixer 경고, flex 속성 에러 그리고 Node-sass 버전 호환성 에러에 대해 알아봅시다.

1. Autoprefixer 경고: "Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated."

이 문제는 부트스트랩과 autoprefixer 간의 버전 차이로 인해 발생합니다. 현재는 더 이상 사용되지 않는 기능이기 때문에 경고가 표시되지만 웹팩과 같은 빌드 도구에서는 경고를 에러로 처리할 수도 있습니다.

해결 방법:
autoprefixer를 10.4.5로 바꿔주거나 최신 버전을 설치한 경우라면 10.4.5를 오버라이드하여 사용합니다.

• yarn을 사용하는 경우:
  package.json 파일에 다음과 같이 resolutions 섹션을 추가합니다.그리고 yarn install 명령을 실행하여 의존성을 갱신합니다.
• "resolutions": { "autoprefixer": "10.4.5" }
• npm을 사용하는 경우:
  package.json 파일에 다음과 같이 overrides 섹션을 추가합니다.그리고 npm install 명령을 실행하여 의존성을 갱신합니다.
• "overrides": { "autoprefixer": "10.4.5" }

이후 앱을 다시 실행하여 경고가 사라졌는지 확인합니다.

2. Flex 속성 에러: "end value has mixed support, consider using flex-end instead"

이러한 에러는 align-items나 justify-content 속성에 end 값을 사용할 때 발생합니다. 이러한 속성을 flex-end로 변경하면 에러가 해결됩니다. 마찬가지로 start도 동일한 문제를 일으킬 수 있으며, 이 경우에는 flex-start로 수정하면 됩니다.

3. Node-sass 버전 호환성 에러: "Node Sass version 5.0.0 is incompatible with ^4.0.0"

이 문제는 Node-sass 5 버전이 Node 15에서만 동작하기 때문에 발생합니다. Node 버전이 이보다 하위인 경우에 발생합니다.

해결 방법:
구버전의 Node를 사용 중이라면 Node-sass를 4.14.1로 다운그레이드합니다.

• Node-sass를 제거합니다.

    npm uninstall node-sass

• 4.14.1 버전의 Node-sass를 설치합니다.

    npm install node-sass@4.14.1

결론

VSCode 업데이트 이후 발생하는 에러들은 어떠한 원인으로 인해 발생하는 경우가 많습니다. 이번 포스트에서는 autoprefixer 경고, flex 속성 에러, 그리고 Node-sass 버전 호환성 에러를 다루었고, 각 문제들에 대한 해결 방법을 제시했습니다. 더 나은 개발 경험을 위해 에러 해결에 주의하시기 바랍니다. 이제 에러 메시지를 마주했을 때 두려워하지 않고 자신감을 가지고 해결할 수 있을 것입니다.