Webpack SASS-Ladeprogramm kann allgemeine SCSS-Importe nicht deduplizieren

9

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:

%Vor%

In my_app.js Ich benötige die zugehörige SCSS-Datei. Also

%Vor%

Ich bin my_app.scss , ich importiere my_component.scss :

%Vor%

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:

%Vor%

Hier ist was ich beobachte:

  1. Wenn ich webpack-dev-server ausführen, werden die url Referenzen korrekt aufgelöst
  2. Wenn ich jedoch 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:

  1. Verwenden Sie eine $font-path Variable, um auf ../fonts zu verweisen, und setzen Sie sie auf node_modules/my_components/font
  2. Überprüfung der Reihenfolge meiner Lader, Aktualisierung meiner Webpack-Version usw.

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:

  1. Warum bricht node-sass-import-once den Webpack resolve-url-loader?
  2. Gibt es eine Möglichkeit, das importierte Webpack zu deduplizieren und CSS ohne Stilduplizierung zu generieren?
Jay 28.04.2016, 22:25
quelle

1 Antwort

3

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:

%Vor%

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.

    
Matt Derrick 10.05.2016 21:48
quelle