Блог

После обновления некоторых устаревших пакетов npm URL-адреса в моих файлах SCSS больше не находят исходные файлы. Когда я запускаю «запуск npm», я получаю сообщение об ошибке:

Не удалось скомпилировать.

./src/стили/objectWindow.scss (./node_modules/react-scripts/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/sass-loader/dist/cjs.js??ref—5-oneOf-6->>4!./src/styles/objectWindow.scss)

Ошибка: Не удается разрешить «../img/IcoChance.png» в «W:uisrcstyles’

Моя структура папок не изменилась и (начиная с W:ui):

 /public/
-- index.html
-- img/
---- IcoChance.png
/src/
-- styles/
---- objectWindow.scss
 

С большим количеством файлов, которые не отображаются. Все изображения находятся в /public/img, все *.js находятся в /src, а все файлы *.scss находятся в /src/стилях.

До обновления моих пакетов npm до последней версии у меня были эти (из package.json / «зависимости»):

 "css-loader": "^3.6.0",
"node-sass": "^4.14.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "^3.4.4",
"reactjs-popup": "^1.5.0",
 

плюс несколько других, которые явно не имеют отношения к этой проблеме. С этими версиями приложение работает нормально. После обновления до @latest они становятся:

 "css-loader": "^5.1.3",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"reactjs-popup": "^2.0.4",
 

С этими @последними версиями он больше не работает. В файлах SCSS все URL-адреса отображаются в виде абсолютных путей, подобных этому:

 .ObjClass_Chance         { background: url(/img/IcoChance.png) no-repeat; }
 

When the application runs, /public corresponds to the root folder on the URL. So pointing the browser to http://localhost:3000/img/IcoChance.png would normally show the image). Hence, I believe that Url(/img/IcoChance.png) in the SCSS file should reference the same file (as it used to).

I’ve found many instances of issues with relative URLs in SCSS files, but these aren’t the same as my problem, since my URLs are all absolute.

In an attempt to isolate the culprit, I rolled back to the original versions, and the app ran as before. Then I installed one at a time, starting with:

 npm install css-loader@latest
npm install node-sass@latest
 

The upgrade to css-loader did not break it. But after the second line, but it started this behavior after the upgrade to the node-sass@latest. So node-sass would seem to be the culprit.

Я также удалил node-sass и попытался вместо этого использовать sass (который, я думаю, раньше был dash-sass), но поведение с неправильным разрешением URL-адресов было таким же, как и с node-sass@latest.

Я потратил на это много времени и застрял. Помощь оценена по достоинству.