Ошибка компиляции SASS в Bootstrap после обновления до React 18
После обновления React с 17.0.2 на 18.2.0 приложение больше не компилируется из-за ошибки компиляции SASS, которая выглядит так:
SassError: property "url" must be followed by a ':'
on line 6 of node_modules/bootstrap/dist/css/bootstrap.min.css
>> size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg x
------------------------------------------^
Есть пакеты Bootstrap и node-sass, которые я использую:
"bootstrap": "^5.1.3",
"react-bootstrap": "^2.2.2",
"node-sass": "^7.0.1"
Я не обновлял версии каких-либо других пакетов, кроме react и react-dom, хотя пытался обновить bootstrap, react-bootstrap и node-sass до последних доступных версий, но это не решает проблему.
Что может вызвать эту ошибку? Я не понимаю, как это может быть проблемой с React 18.
Ответы 1
Я немного покопался и подумал, что ваша проблема будет связана с этим - https://github.com/sass/node-sass/issues/2931 но эта ошибка связана с интерполяцией переменных sass в css переменная, которая вызывает ту же ошибку компиляции. Они также упоминают о проблемах, возникающих при использовании начальной загрузки 5.1.3 и 5.2.3.
Вы считали, что node-sass устарела? https://www.npmjs.com/package/node-sass
Посмотрите этот предыдущий ответ, где пользователь предлагает вместо этого использовать только sass. Надеемся, что отказ от node-sass позволит компиляции снова работать.