Node.js Sass 버전 7.0.0은 ^4.0.0 || ^5.0.0 || ^6.0.0과 호환되지 않습니다.

Node.js Sass 버전 7.0.0은 ^4.0.0 || ^5.0.0 || ^6.0.0과 호환되지 않습니다.

Node.js v16.13.1을 사용하여 React 애플리케이션을 만들었습니다.Sass를 사용하려고 했는데 실행하려고 했을 때 다음 오류가 발생했습니다.

노드 Sass 버전 7.0.0은 ^4.0.0 || ^5.0.0 || ^6.0.0과 호환되지 않습니다.

리액트 앱에서 SCSS와 Sass를 사용하려면 다음과 같이 시도하면 파일이 올바르게 컴파일됩니다.

1. 첫 번째 제거node-sass:

yarn remove node-sass
# if you use npm
npm uninstall node-sass

2. 그 후, 인스톨sass대신node-sass:

yarn add -D sass
# if you use npm
npm i -D sass

노드 sass를 더 이상 사용하지 않음

node-sass는 권장되지 않습니다.대신 사용sass. 이전 버전을 제거하고 새 버전을 설치할 수 있습니다.

npm uninstall node-sass
npm install sass

하지만 만약 당신이 여전히 그것을 사용하는 것을 선호한다면node-sass

다음 표를 사용하여 적절한 버전을 설치할 수 있습니다.node-sass명령어로 확인할 수 있는 설치된 Node.js 버전node --version.

npm install node-sass@(your version)

패키지에서 Sass로 전환하면 됩니다.다음과 같은 json 파일:

 "node-sass": "npm:sass@^1.49.9",

이렇게 하면 리액트는 여전히node-sass분리하여 교체한 후sass이렇게 에일리어스를 붙이면 React는 Sass를 사용합니다.

저도 같은 문제가 있었어요sass아래 명령어를 실행했지만 모두 작동하지 않았습니다.

npm uninstall node-sass
npm install sass

그래서 마침내 나는 내 사진을 보았다.package.jsonsass-loader를 설치한 것을 보고 제거 및 설치했더니 문제가 해결되었습니다.이를 위해 다음 명령을 사용할 수 있습니다.

npm uninstall sass-loader
npm install sass-loader

이 문제를 해결하려면node-sass 버전4.14.1다음 명령어를 사용합니다.

• npm과 함께

npm uninstall node-sass
npm install node-sass@4.14.1

• 실 포함

yarn remove node-sass
yarn add node-sass@4.14.1

삭제만 하면 됩니다.node-sass및 설치sass대신:

1. node_module 디렉토리를 삭제합니다.
2. 달려.yarn remove node-sass
3. 달려.yarn add sass

또는 npm과 함께

1. node_delete 디렉토리를 삭제합니다.
2. 달려.npm uninstall --save node-sass
3. 달려.npm install --save sass

이 질문에 대한 답변에는 잘못된 정보가 많이 있으며, 구글에서 가장 먼저 표시됩니다.

어플리케이션에서 이 문제가 발견되면 원인은 이 문제의 원인이 아닙니다.node-sass또는 Node.js 버전.바로 그sass-loader이전 버전은 최신 버전과 호환되지 않으므로 업그레이드해야 하는 라이브러리입니다.node-sass.

간단히 할 수 있다npm install node-sass@6.0.

이는 Node.js 16이 노드 sass 버전 6.0과 호환되기 때문입니다.

저도 같은 문제가 생겼어요.'node-sass' 설치 시 Node.js 버전은 15였습니다.

Node.js 버전12로 다운그레이드하여 버전12 관련 'node-sass'를 설치한 후 정상적으로 동작했습니다.

node -v

# Output: v15.2.0

nvm use 12.18.3

현재 Node.js v12.18.3(npm v6.14.6)을 사용하고 있습니다.

node -v

# Output: v12.8.3

npm install node-sass@4.14.1

정상적으로 동작하고 있는지 확인하려면 , abc.sass 파일을 추가합니다.그리고 스타일을 작성하여 컴포넌트에 Import합니다.

입력과 다음 단계에 따라 빌드 관리 중에 shopware6에서 동작하도록 했습니다.sh 유사한 오류가 발생한 경우:

오류: 노드 Sass 버전 7.0.1은 ^4.0.0과 호환되지 않습니다.

ERROR in ./src/app/component/base/sw-button/sw-button.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--15-2!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/app/component/base/sw-button/sw-button.sc)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (/var/ww

현재 설치되어 있는 노드 sass 버전을 확인하고 "lower" 버전을 제거 및 설치합니다.

npx node-sass -v results in:
node-sass: 7.0.1
libsass 3.5.5

npm uninstall node-sass
npm install node-sass@4.14.1

npx node-sass -v results in:
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

그 전에 완전한 htdocs 폴더에 기재된 버전 번호를 확인했습니다.

.../htdocs$ find . -iname '*package.json*'  | xargs  grep node-sass {}

결과(대규모) 목록에는 다음 노드새스 버전이 있습니다.

....nistration/Resources/app/administration/node_modules/node-sass/package.json:    "lint": "eslint bin/node-sass lib scripts test",
./vendor/shopware/administration/Resources/app/administration/node_modules/sass-loader/package.json:    "node-sass": "^4.5.0",
grep: {}: Datei oder Verzeichnis nicht gefunden
./vendor/shopware/administration/Resources/app/administration/node_modules/stylelint-webpack-plugin/package.json:    "node-sass",
./vendor/shopware/administration/Resources/app/administration/build/nuxt-component-library/package.json:        "node-sass": "4.12.0",
./vendor/shopware/administration/Resources/app/administration/package.json:    "node-sass": "^7.0.1",    <<<<<< THIS ONE !!
./vendor/shopware/administration/Resources/app/administration/package.jsonORIG-2021-12-29:    "node-sass": "^7.0.1",

node-sass@4.14.1을 제거 및 설치하고 표시된 행을 변경한 후

"node-sass": "^7.0.1",

로.

"node-sass": "^4.0.1",

컴파일 되어 build-administration.sh (shopware 6thing...)이 성공했습니다.

Time: 58913ms
Entrypoint commons = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/js/commons.js
Entrypoint app = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/app.css static/js/app.js
Entrypoint storefront = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/storefront.css static/js/storefront.js
Entrypoint payone-payment = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/payone-payment.css static/js/payone-payment.js
Entrypoint wbm-tag-manager-ecomm = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/wbm-tag-manager-ecomm.css static/js/wbm-tag-manager-ecomm.js
   3909 modules
build-administration.sh: 14: build-administration.sh: [[: not found
Copying files for bundle: FrameworkBundle
Copying files for bundle: MonologBundle
Copying files for bundle: SwiftmailerBundle
Copying files for bundle: SensioFrameworkExtraBundle
Copying files for bundle: TwigBundle
Copying files for bundle: EnqueueBundle
Copying files for bundle: EnqueueAdapterBundle
Copying files for bundle: Framework
Copying files for bundle: System
Copying files for bundle: Content
Copying files for bundle: Checkout
Copying files for bundle: Administration
Copying files for bundle: Storefront
Copying files for bundle: Elasticsearch
Copying files for bundle: SwagPlatformDemoData
Copying files for bundle: Netzp6AddressValidator
Copying files for bundle: PayonePayment
Copying files for bundle: WbmTagManagerEcomm
Copying files for bundle: DbalKernelPluginLoader


 [OK] Successfully copied all bundle files

내 경우 #npm npm을 사용하여 처음 제거된 노드 sass를 제거한 다음 npm npm i - D sass를 사용하여 설치합니다.

두 달 전에 이 오류가 발생했습니다.제가 찾을 수 있는 모든 해결책을 시도해 봤어요.

데스크톱에 여러 React 프로젝트를 생성했는지 확인합니다.저도 그렇게 해서 이 문제에 직면하게 되었습니다.모든 파일을 하나의 폴더에 결합하여 오류를 제거합니다.그것은 나에게 효과가 있었다.만약 같은 실수를 하고 있다면 이것을 시도해 보세요.

언급URL : https://stackoverflow.com/questions/70281346/node-js-sass-version-7-0-0-is-incompatible-with-4-0-0-5-0-0-6-0-0