Ломаются пути при использовании SCSS и сборщика (Vite)

Рейтинг: 2Ответов: 0Опубликовано: 09.02.2023

Один и тот же код прекрастно работает на 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.

Ответы

Ответов пока нет.