SASS/SCSS компилирует файл css с относительными путями sass cli

У меня проблемы с компиляцией scss с относительными путями.

Вот моя файловая структура:

src/
├── css/
│   ├── bootstrap.scss
│   ├── main.scss
├── fonts/
│   ├── fonts.css
│   ├── font1.woff2
├── index.html
├── main.css    /* Compiled css */

основной.scss:

@import './bootstrap-init';
@import '../fonts/fonts';

шрифты.css:

@font-face {
  font-family: 'font1';
  src: url('./font1.woff2') format('woff2');
}

Если вы посмотрите на мой fonts.css, src: url(), URL-адрес указывает на правильный файл, который является src/fonts/font1.woff2. Однако после того, как он скомпилирован в src/main.css, src: url() теперь указывает на src/font1.woff2, который не завершается.

Аналогичный вопрос задан здесь для LESS: МЕНЬШЕ импорта CSS и относительных путей

Я использую sass CLI, и это то, что у меня есть на данный момент:

sass --watch css/main.scss main.css

Как мне решить эту проблему? Я могу заменить свои пути, чтобы они всегда указывали из корневой папки, но это не кажется хорошим подходом...