source

오류: PostCSS 플러그인 자동 리픽서에는 PostCSS 8이 필요합니다. PostCSS를 업데이트하거나 이 플러그인을 다운그레이드하십시오.

goodcode 2023. 2. 14. 23:14
반응형

오류: PostCSS 플러그인 자동 리픽서에는 PostCSS 8이 필요합니다. PostCSS를 업데이트하거나 이 플러그인을 다운그레이드하십시오.

npm을 시작할 때마다 이 오류가 발생합니다.나는 몇 가지 수정을 시도했지만, 어느 것도 나에게 맞지 않았다.autoprefixer의 버전을 9.8.6으로 변경하려고 했지만 작동하지 않았습니다.이 문제에 대해 도와주세요.

제 소포입니다.json

{
  "name": "reactgallery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.10"
  }
}

퀵픽스

autoprefixer를 버전9로 다운그레이드하여

"compixer" : "^9.0.0"

더 많은 정보를 얻을 수 있습니다.

상세

PostCSS는 버전8로 업데이트 되었습니다만, 새로운 PostCSS 8+ API를 사용하는 PostCSS 플러그인을 처리하기 위해 PostCSS CLI는 아직 업데이트되지 않았습니다.Autoprefixer는 버전 10 이후 새로운 PostCSS 8 API를 사용합니다.

이는 PostCSS GitHub 페이지의 알려진 문제로 문서화되어 있습니다.

새로운 PostCSS 8+ API를 사용하는 플러그인을 처리하기 위해 PostCSS CLI를 업데이트하면 이는 문제가 되지 않을 것입니다.단, 그 전까지는 오류를 피하기 위해 일부 PostCSS 플러그인을 다운그레이드해야 할 수 있습니다.

잘 모르겠습니다만, postcss를 의존관계로서 인스톨 해 주실 수 있나요?

npm i postcss

이 문제가 있고 테일윈드 CSS v2를 사용하고 있는 경우는, 이것을 사용해 주세요.

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

출처 : https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

네, package-lock.json을 삭제하고 설치했습니다.

"tailwindcss": "^1.8.10"
"postcss-cli": "^7.1.0"
"autoprefixer": "^9.7.5"
"dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^8.0.0",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
},

Dependecies 개체 및 버전은 에서 직접 수정할 수 있습니다.package.json파일 및 동작

이 단계들은 나에게 효과가 있었다.이건 github에서 온 거야

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

문서 링크에 따라 이전 NodeJ에 대한 지원이 일부 해제되므로 패키지를 수동으로 업그레이드해야 합니다.예를 들어 웹 팩을 기반으로 한 프로젝트의 경우 이러한 종속성만 업데이트하면 됩니다.

  "dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
  }

따라서 autorefixer를 다운그레이드할 필요가 없습니다.

다음 콤보는 2020년 10월 현재 작동합니다.

  ...
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^8.1.0",
    "tailwindcss": "^1.9.2"
  }

Next.js 10의 경우,

npm install tailwindcss@latest postcss@latest autoprefixer@latest

출처문제는 이쪽

PostCSS 7 호환성 구축을 위한 공식 솔루션 수정 사용

yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Larabel-mix 5, PostCSS 8, Tailwind 2에서 이 문제가 발생했습니다.
Laravel-mix 6(현재의 베타)로 해결되었습니다.

npm install laravel-mix@next --save-dev

심플하고

npm install postcss@^8 

그것은 나에게 매우 효과가 있었다.

언급URL : https://stackoverflow.com/questions/64057023/error-postcss-plugin-autoprefixer-requires-postcss-8-update-postcss-or-downgra

반응형