Ломаются пути при использовании SCSS и сборщика (Vite)
Один и тот же код прекрастно работает на CSS, но отказывается работать на SCSS.
CSS
@import url("bootstrap/dist/css/bootstrap.min.css");
@import url("bootstrap-icons/font/bootstrap-icons.css");
SCSS
@use "bootstrap/scss/bootstrap";
@use "bootstrap-icons/font/bootstrap-icons";
В примере используется библиотека Bootstrap, но это роли не играет. Я проверял с обычными шрифтами (src/fonts/Roboto.ttf
), а также Font Awesome. При использовании SCSS по какой-то причине не подтягивается относительный путь к шрифтам в исходнике -- в итоге программа пытается найти его в корне проекта, и, очевидно, не находит.
GET http://localhost/fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47
net::ERR_ABORTED 404 (Not Found)
GET http://localhost/fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47
net::ERR_ABORTED 404 (Not Found)
В Webpack это фиксилось пакетом resolve-url-loader, в описании к которому даже есть отдельный параграф посвящённый решению проблемы относительных путей в SCSS.
Есть ли что-то подобное для Vite?
P.S. Настройки Vite по-умолчанию. Ничего не добавлял, ничего не менял, только sass
установил пакетом.
P.P.S Немного исследовав ситуцию, понял, что проблема в самом пакете sass
, разработчики которого не добавили оптицию перезаписи путей (как это есть в Less) по какой-то причине. Однако, раз есть решение от сообщества (через source map) для Webpack, то должно быть и для Vite.