Vue 3(v3.2.10)에서 Tailwind CSS를 설치할 때 PostCSS 8 오류 해결(Vite가 아님, PostCSS 8 지원)

Question

Vite를 사용하지 않고 Vue 버전 3.2.10을 사용하고 있으며 Tailwind CSS 버전 2.2.14(최신 버전)를 설치하려고 합니다.

중요: Vue는 버전 3.0.6부터 PostCSS 8을 지원합니다 (GitHub 문서의 "기능" 아래 업데이트된 포인트 3 참조)

설치 지침을 주의 깊게 따른 후 npm run Serve를 실행할 때 다음 오류가 계속 발생합니다.

./src/assets/main.css에 오류가 있습니다.

구문 오류: 오류: PostCSS 플러그인 tailwindcss에는 PostCSS 8이 필요합니다.
최종 사용자를 위한 마이그레이션 가이드:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

이것은 내 package.json 파일입니다:

"스크립트": {
    "serve": "vue-cli-service 서브",
    "build": "vue-cli-서비스 빌드"
  },
  "종속성": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@headlessui/vue": "^1.4.1",
    "core-js": "^3.6.5",
    "날짜-fns": "^2.23.0",
    "firebase": "^8.9.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependency": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^10.3.4",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.14"
  }

위에서 언급했듯이 Vue 3.0.6 이상은 확실히 PostCSS 8을 지원합니다. 또한 Tailwind CSS에 대한 "PostCSS 7 호환 빌드" 설명이 작동하지 않습니다.

按光这些说明后，我收到以下错误：

npm ERR! 코드 ERESOLVE
npm 오류입니다! ERESOLVE가 종속성 트리를 확인할 수 없습니다.
npm 오류입니다! 
npm 오류입니다! 발견됨: postcss@7.0.36
npm 오류입니다! node_modules/postcss
npm 오류입니다!   루트 프로젝트의 dev postcss@"^7"
npm 오류입니다!   autoprefixer@9.8.6의 postcss@"^7.0.32"
npm 오류입니다!   node_modules/autoprefixer
npm 오류입니다!     루트 프로젝트의 dev autoprefixer@"^9"
npm 오류입니다!     @vue/cli-service@4.5.13의 autoprefixer@"^9.8.6"
npm 오류입니다!     node_modules/@vue/cli-service
npm 오류입니다!       @vue/cli-plugin-babel@4.5.13의 피어 @vue/cli-service@"^3.0.0 || ^4.0.0-0"
npm 오류입니다!       node_modules/@vue/cli-plugin-babel
npm 오류입니다!         루트 프로젝트의 dev @vue/cli-plugin-babel@"~4.5.0"
npm 오류입니다!       3개 이상(@vue/cli-plugin-router, @vue/cli-plugin-vuex, 루트 프로젝트)
npm 오류입니다!     1개 더(tailwindcss)
npm 오류입니다!   42개 이상(@intervolga/optimize-cssnano-plugin, ...)
npm 오류입니다! 
npm 오류입니다! 종속성을 해결할 수 없습니다.
npm 오류입니다! postcss-cli@8.3.1의 피어 postcss@"^8.0.0"
npm 오류입니다! node_modules/postcss-cli
npm 오류입니다!   루트 프로젝트의 dev postcss-cli@"^8.3.1"
npm 오류입니다! 
npm 오류입니다! 업스트림 종속성 충돌을 해결하거나 다시 시도하세요.
npm 오류입니다! --force 또는 --legacy-peer-deps를 사용한 이 명령
npm 오류입니다! 잘못된(그리고 잠재적으로 손상될 수 있는) 종속성 해결을 허용합니다.
npm 오류입니다! 
npm 오류입니다! 전체 보고서는 /Users/mgav/.npm/eresolve-report.txt를 참조하세요.

npm 오류입니다! 이 실행의 전체 로그는 다음에서 찾을 수 있습니다.
npm 오류입니다!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助!

Answer 1

어떤 경우에는 문제가 VueJS와 직접적인 관련이 있는 것이 아니라 vue-cli와 관련된 것 같습니다.

나에게 도움이 된 솔루션은 다음과 같습니다.

1. @vue/cli를 "^5.0.0-beta.3"(이전의 "~4.5.0")으로 업데이트 - (Link on npm)
2. @vue/compiler를 최신 안정 버전으로 업데이트하세요 - (npm 링크 - 현재 3.2.11)
3. postcss7-compat 버전을 사용하지 않았음에도 게시물의 지침에 따라 npm uninstall tailwindcss @tailwindcss/postcss7-compat를 통해 제거했습니다.
4. npm install tailwindcss@latest postcss@latest autoprefixer@latest를 통해 TailwindCSS, PostCSS 및 AutoPrefixer의 최신 버전을 다시 설치하세요.

바로 그거예요!

참고: 이것은 내 직업이 아닙니다. 나는 Lindsay Wardell(@lindsaykwardell)에 의해 Vuejs 포럼의 이 게시물로 이동하게 되었으며, Thomas Castelly(또한 StackOverflow 계정이 없음)가 솔루션을 제공했습니다.