Ich habe folgende Struktur:
%Vor% Ich versuche, die Stile in my_component.scss zu importieren. Diese Datei enthält @font-face -Deklarationen mit Verweisen auf ../font/ . So etwas wie:
In my_app.js Ich benötige die zugehörige SCSS-Datei. Also
Ich bin my_app.scss , ich importiere my_component.scss :
und sassConfig wird auf node_modules/my_component/scss festgelegt, damit der Import funktioniert.
Meine Loader-Konfiguration verwendet sass-loader , resolve-url-loader und css-loader . Hier ist ein Ausschnitt:
Hier ist was ich beobachte:
webpack-dev-server ausführen, werden die url Referenzen korrekt aufgelöst webpack mit der gleichen conf-Datei starte, bekomme ich Module not found: Error: Cannot resolve 'file' or 'directory' ../font/font-file.ttf in src/font/
Dinge, die ich versucht habe:
$font-path Variable, um auf ../fonts zu verweisen, und setzen Sie sie auf node_modules/my_components/font
Aktualisieren
Meine sassLoader config hatte zuvor eine Konfiguration für node-sass-import-once . Als ich es entfernte, begannen meine Font-URLs erneut zu lösen, aber mein generiertes CSS enthält eine Tonne doppelter Stile.
node-sass importiert wiederholt jedes @import , ohne irgendeine Art von Deduplizierung durchzuführen (ich weiß, dass es nicht in der Lage ist, es selbst zu tun). Aber node-sass-import-once , das für diese Art von Sache gedacht ist, löst resolve-url-loader.
Hier sind meine Fragen:
Ohne Ihre Webpack-Konfiguration zu sehen, kann ich nur eine Vermutung riskieren, aber es sieht so aus, als wollten Sie eine CSS-Datei von node_modules importieren.
Wenn Sie CSS von node_modules importieren möchten, müssen Sie möglicherweise ~ verwenden. Wie Sokra selbst sagt in dieses Problem :
css @import ist relativ zum aktuellen Verzeichnis. Um "wie ein Modul" aufzulösen, können Sie ~ voranstellen.
Also könnte etwas wie @import '~module/my_component.scss'; den Trick machen.
Das Auflösen von Importen auf diese Weise löste auch ein Problem, das ich hatte, wo x.css von x.js benötigt wurde und von y.css importiert wurde, wenn x.css etwas sass variable config importierte. Unter Verwendung von resolve.alias in der Webpack-Konfiguration könnte ich einfach etwas tun wie:
Und dann benutze die Tilde um zu importieren:
%Vor% Wenn das funktioniert, müssen Sie nicht node-sass-import-once entfernen und alles sollte korrekt gelöst werden.
Tags und Links webpack sass webpack-dev-server node-sass