Я создал пустой проект React, используя команду: npx create-response-app на npm v7.0.7 и Node.js v15.0.1

Установлено:

  • React v17.0.1,
  • узел-sass v5.0.0,

Затем я попытался импортировать пустой файл .scss в компонент приложения:

Файл App.js

import './App.scss'

function App() {
  return (
    
App
); } export default App;

Выдает ошибку:

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Файл package.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
 ...

  }
}

Ответы (21)

TL; DR

  1. npm удалить node-sass
  2. установка npm node-sass@4.14.1

Или, если используется Пряжа (по умолчанию в более новых CRA версиях)

  1. yarn remove node-sass
  2. yarn add node-sass@4.14.1

Edit2: sass-loader v10.0.5 исправляет. Проблема в том, что вы можете использовать его не как зависимость от проекта, а как зависимость от ваших зависимостей. CRA использует фиксированную версию, angular-cli блокирует node-sass v4 и т. Д.

На данный момент рекомендация такова: если вы устанавливаете только node-sass, проверьте описанный ниже обходной путь (и примечание). Если вы работаете над пустым проектом и можете управлять конфигурацией Webpack (без использования CRA или CLI для создания каркаса вашего проекта), установите последнюю версию sass-loader.


Изменить: эта ошибка исходит от sass-loader. Существует несоответствие семантического управления версиями , поскольку node-sass @latest - v5.0.0, а sass-loader ожидает ^ 4.0.0.

В их репозитории есть открытая проблема со связанным исправлением, которое необходимо проверить. А пока см. Решение ниже.


Обходной путь: пока не устанавливайте node-sass 5.0.0 (основная версия была только что обновлена).

Удалить node-sass

npm удалить node-sass

Затем установите последнюю версию (до 5.0)

установка npm node-sass@4.14.1


Примечание: LibSass (отсюда и node-sass) устарел, а рекомендуемая реализация - dart-sass.Вы можете использовать sass вместо, который представляет собой Node.js-дистрибутив dart-sass, скомпилированный на чистый JavaScript.

Однако будьте осторожны:

Будьте осторожны при использовании этого подхода. React-scripts использует sass-loader v8, который предпочитает node-sass sass (который имеет некоторый синтаксис, не поддерживаемый node-sass). Если оба установлены и пользователь работал с sass, это могло привести к ошибкам при компиляции CSS

У меня это сработало после добавления конкретной версии пакета node-sass (node-sass@4.14.1)

Удалить node-sass:

npm uninstall node-sass

Используйте sass по:

npm install -g sass
npm install --save-dev sass

Добавление sass-loader в качестве dev-dependency решило эту проблему для меня. "devDependencies": {"node-sass": "^ 6.0.0", "sass-loader": "^ 11.1.1"}

Просто измените версию на: "версия": "4.14.1" в вашем файле package.json

Используя npm,

  1. npm удалить node-sass
  2. npm install node-sass
  3. замените "response-scripts": "4.0.0" на "react-scripts": "4.0.3" в package.json и сэкономьте
  4. установка npm
  5. начало npm

или пряжей -

  1. пряжа удалить узел-sass
  2. добавление пряжи --dev node-sass
  3. как указано выше
  4. укладка пряжи
  5. начало пряжи

Я столкнулся с той же проблемой, и вот как я смог ее исправить:

Во-первых, вы должны знать, какую версию node-sass вы используете в своем проекте. Затем обновите или понизьте свою текущую версию Node.js до совместимой с вашей текущей версией node-sass, вы можете узнать это из по этой ссылке.

Конечно, остановите сервер и закройте IDE.

Итак, лучший способ обновить или понизить версию Node.js упоминается выше в этом ответе. Затем удалите node_modulesи package-lock.json и установите снова ... Вы можете сделать это так:

очистка кэша npm --force

rm -rf / node_modules пакет-lock.json

npm install

исправление аудита npm

npm run <имя_вашего_скрипта>

Лучшим решением для меня было удаление node-sass.

npm uninstall node-sass

затем установите sass:

npm install sass

Для тех, кто использует Пряжа:

yarn remove node-sass
yarn add sass

Удалить файл yarn.lock в проекте и

yarn remove node-sass
yarn add node-sass

Эта ошибка связана с несовместимой версией загрузчика sass с node-sass.

Добавьте эти зависимости в конец файла package.json.

Примечание: вы можете проверить в Google, какая версия sass-loader совместима с вашей версией node-sass.

"devDependencies": { "node-sass": "^ 6.0.1", "sass-loader": "^ 10.2.0" }

Обновленный ответ


Обратите внимание: Node Sass устарел, и вы можете заменить его на Dart Sass:

Предупреждение: LibSass и Node Sass устарели. Хотя они будут продолжать получать отладочные версии на неопределенный срок, нет планов по добавлению дополнительных функций или совместимости с какими-либо новыми функциями CSS или Sass. Проекты, которые все еще используют его, следует переместить на Dart Sass.

Источник: https://www.npmjs.com/package/node-sass

Мне помог рецепт ниже:

  1. Удалить node-sass:
    • npm: npm удалить node-sass
    • пряжа: пряжа удаляет узел-сасс
  2. Удалить sass-loader:
    • npm: npm удалить sass-loader
    • пряжа: пряжа для удаления sass-loader
  3. Установить Dart Sass как зависимость для разработки
    • npm: npm install sass -dev
    • пряжа: пряжа добавить sass -dev

Перед сборкой необходимо также:

  1. Удалить node_modules каталог
  2. Удалить файл блокировки:
    • npm: Удалить package-lock.json
    • пряжа: Удалить yarn.json

Действия по устранению этой проблемы:

  1. Перейдите в папку node_module и откройте модули node-sass.

  2. В файле package.json внутри node-sass измените версию с «5.0.0» на «4.14.1».

  3. Наконец, в package.json в корне основного проекта снова измените версию node-sass с «5.0.0» на «4.14.4».

Это должно работать.

node-sass aka LibSass официально устарел с 26 октября 2020 года, и вместо этого вы должны использовать sass aka Дарт Сасс.

Для npm вы можете сделать:

npm uninstall node-sass
npm install sass --save-dev

Для пряжи сделать:

yarn remove node-sass
yarn add sass

Если вы используете CRA с менеджером пакетов по умолчанию Yarn, используйте следующее. У меня сработало.

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

Или перестройте свой node-sass, чтобы совместимость не вызывала ошибки. Когда возникает несовместимость между node-sass и node, вы получите машинописные ошибки. Сделайте это для достижения совместимости node-sass.

npm rebuild node-sass

Небольшое обновление: в случае, если вы получите указанную ниже ошибку в отношении node-sass, выполните действия, указанные ниже.

код EPERM npm ERR! отключение системного вызова

Действия по устранению проблемы:

  1. Закройте Visual Studio
  2. Вручную удалить .node-sass.DELETE из node_modules
  3. открыть Visual Studio
  4. проверка кэша npm
  5. установка npm node-sass@4.14.1

Согласно Edit2 Николаса Хевиа говорит, что

sass-loader v10.0.5 исправляет

Я запустил эту команду:

npm install sass-loader@^10.0.5 node-sass --save-dev

Это устранило мою проблему.

Имейте в виду, что я нахожусь в среде разработки. В остальных случаях следует убрать опцию - save-dev.

В app.js или везде, где импортируется css, убедитесь, что вы импортируете css, а не scss. Скрипт в package.json создаст файл css, который нужно импортировать.

    "scss": "node-sass --watch -include-path src/scss -o src/css"

Этот сценарий будет наблюдать за файлом scss внутри папки scss, которая находится внутри src. Затем он создаст папку css внутри src и добавит файл css внутри этой папки, это файл, который вы должны импортировать в app.js

Для запуска скрипта:

npm run scss

Пример файловой структуры: src / scss / styles.scss

CSS-файл, созданный скриптом: src / css / styles.css

Единственная причина, по которой вы получаете такую ​​ошибку, заключается в том, что ваша версия Node.js несовместима с вашей версией node-sass.

Итак, не забудьте проверить документацию по адресу node-sass.

Или это изображение ниже поможет вам решить, какая версия Node.js может использовать версию node-sass.

Enter image description here

Например,, если вы используете Node.js версии 12 в своей системе Windows («возможно»), тогда вам необходимо установить узел . -sass версия 4.12.

npm install node-sass@4.12

Ага, вот так. Итак, теперь вам нужно только установить версию node-sass, рекомендованную командой node-sass, с версией Node.js, установленной на вашем компьютере.

Это проблема версии. Установите нужную зависимую версию:

npm удалить node-sass
npm install node-sass@4.14.1

Если ошибка

Ошибка: Node Sass версии 5.0.0 несовместим с ^ 4.0.0

Шаг1: остановите сервер

Шаг 2: команды запуска: npm uninstall node-sass

Step3: проверьте node-sass в package.json, если node-sass доступен в файле, затем снова запустите Step2.

Step4: npm install node-sass@4.14.1 <=== команда запуска

Шаг 5: дождитесь успешного выполнения команды.

Шаг 6: запуск сервера с использованием npm start

2022 WebDevInsider