Sass Import falsches Verzeichnis

Question

Ich habe folgende Hierarchie:

main.scss 
styles/_partial.scss 
fonts/ 

In main.scss:

@font-face { 
    font-family: 'ProximaNova'; 
    src: url('./fonts/ProximaNova-Regular.otf'); 
} 

Der Import hier verursacht keine Probleme. Jedoch in styles/_partial.scss Ich habe:

@import '../main'; 

Dies verursacht ein Problem. Scheinbar passiert, dass _partial.scss importiert wird main.scss, aber wenn es versucht, die Schriftart zu importieren, sieht es in styles/fonts/.. (partial.scss aktuellen Verzeichnis) und nicht main.scss aktuellen Verzeichnis.

Ich verwende Webpack und das ist der Fehler, den ich bekommen:

ERROR in ./~/css-loader!./~/sass-loader!./src/app/styles/_partial.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/ProximaNova-Regular.otf in /src/app/styles 

Answer 1

Normalerweise würden Sie partials in main.scss, nicht umgekehrt importieren. Main hätte @import 'styles/partial.scss'; (Hinweis: kein Unterstrich hier).
Dann funktioniert auch die Schriftart-URL, da der Pfad relativ zur Basisdatei main.scss ist.