Wie lade ich font-awesome mit SCSS (SASS) in Webpack unter Verwendung relativer Pfade?

84

Ich habe font-awesome in meinem Ordner node_modules, also versuche ich, es wie folgt in meine .scss-Hauptdatei zu importieren:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

Die Kompilierung der Webpack-Bündelung schlägt jedoch fehl

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

da die Datei font-awesome.scss auf den relativen Pfad '../fonts/' verweist.

Wie kann ich scss \ webpack anweisen, eine andere Datei zu importieren und den Ordner dieser Datei als Basisordner zu verwenden, damit die relativen Pfade wie erwartet funktionieren?

Richard
quelle
Ich kenne kein Webpack, aber können Sie die .eot einfügen ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?
BrTkCa
Ich könnte das tun, indem ich die font-awesome-Datei ändere, aber dann würde ich die Änderungen verlieren, wenn ich npm aktualisiere, also ist das keine Option.
Richard
Webpack arbeitet zusammen Express @Richard?
BrTkCa
Nein, ohne Express
Richard
Ich benutze die npm für den font-awesome sass loader. Hast du einen anderen benutzt?
Winnemucca

Antworten:

139

Verwenden

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

wo die $fa-font-pathVariable in gesehen wirdfont-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default;

Die Tilde "~" wird vom Sass-Loader mithilfe des Webpack-Mechanismus interpoliert .

user137794
quelle
11
Funktioniert nicht für mich, es wird kompiliert, aber ich bekomme nur ein Rechteck auf meiner Website ...: /
Donovan Charpin
1
Ich musste meine als $fa-font-path: "font-awesome/fonts"- dh ohne die Tilde einstellen .
Ctrlplusb
2
Könnten Sie etwas genauer erklären, wo Sie was bearbeiten? Ich verstehe diese Antwort nicht
Richard
@ Richard, konnten Sie das für Sie zum Laufen bringen? Bitte markieren Sie dies auch als Antwort!
Ascherer
Nein, ich habe damals meine Antwort unten verwendet.
Richard
29

Es scheint keine Möglichkeit zu geben, Dateien zu importieren, die ihre eigenen relativen Pfade in SCSS \ SASS haben.

Also habe ich es stattdessen geschafft, dies zum Laufen zu bringen :

  • Importieren Sie die Datei "scss \ css font-awesome" in meine .js- oder .jsx-Dateien, nicht in meine Stylesheet-Dateien:

    'font-awesome / scss / font-awesome.scss' importieren;    
  • Fügen Sie dies meiner Datei webpack.config hinzu:

    Modul:
    {
        Lader:
        [
            {test: /\.js?$/, loader: 'babel-loader? cacheDirectory', ausschließen: / (node_modules | bower_components) /},
            {test: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', ausschließen: / (node_modules | bower_components) /},
            {test: /\.scss?$/, loader: ['style-loader', 'css-loader', 'sass-loader']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader? mimetype = image / svg + xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]]
    }}
Richard
quelle
Wie gehen Sie mit einem anderen Schriftpfad um? Ich meine, Sie importieren den SCSS dort, aber Sie können den Pfad zu Ihren Schriftdateien nicht ändern, z. B. wenn Sie ihn für die Produktion ändern müssen und die Schriftarten in einem anderen Ordner gefunden werden. Irgendwelche Ideen? Das muss ich tun.
LordTribual
Ich muss noch nichts für die Produktion ändern. Ich stelle mir vor, ich würde einfach alles von meinem lokalen Build kopieren und die Pfade in Ruhe lassen. Andernfalls sehen Sie sich vielleicht den Ausgabeabschnitt von webpack.config.js an und prüfen Sie, ob Sie die Pfade ändern können. Oder fügen Sie einfach einen Post-Build-Schritt in den Abschnitt " package.json- Skripte" ein.
Richard
2
Habe es geschafft. Ich habe den Pfad für den Loader geändert und jetzt werden die Schriftarten aus dem angegebenen Pfad geladen.
LordTribual
Sie müssen die font-awesome scss-Datei nicht in das Javascript aufnehmen. Sie können es weiterhin in Ihr scss aufnehmen, solange Sie den Schriftartpfad wie von user137794 vorgeschlagen festlegen, und dann die Datei webpack.config aktualisieren, um die von Ihnen vorgeschlagenen Schriftarten zu berücksichtigen.
Dave Lancea
Welche npm hast du benutzt? Ich benutze den Sass Font Awesome Loader und habe keinen Erfolg.
Winnemucca
20

Folgendes hat bei mir funktioniert:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Dies dient zum Importieren der font-awesome& erforderlichen Schriftarten in das Projekt. Eine andere Änderung webpackbetrifft die Konfiguration, um die erforderlichen Schriftarten mit zu laden file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}
Yogesh Agrawal
quelle
12

Gelöst durch Ändern meiner app.scss:

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Diese Methode ist nützlich, um externe Abhängigkeiten unverändert und nicht versioniert zu halten.

Wilk
quelle
2
Sie können Zeile 1 vermeiden und `! Default` am Ende von Zeile 2 verwenden.
Nighto
Es ist eine Schande, dass ich diese Methode nicht zum Laufen bringen kann, da dies bedeuten würde, dass ich die _variables.scssDatei nicht jedes Mal ändern musste, wenn ich das Projekt neu kompilierte. Es überschreibt nicht $fa-font-pathoder irgendeine andere Variable für diese Angelegenheit. Also nicht sicher, wie Sie es geschafft haben_
Jesus g_force Harris
7

Ich habe gerade den Pfad in meiner Haupt-SCSS-Datei festgelegt und es funktioniert:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
ramon22
quelle
7

So hat es bei mir funktioniert. Der Trick besteht darin $fa-font-path, den Pfad der Schriftarten wie folgt festzulegen.

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

Hinweis : Bitte überprüfen Sie Ihren Schriftartenordner node_modulesin meinem Fall@fortawesome/fontawesome-free

Muhammad
quelle
1
@Muhammed Eigentlich ist es etwas schwierig, solche Webfonts zu laden. Wenn Sie sass nach CSS kompilieren, werden Ihre Schriftarten möglicherweise nicht kompiliert. Sie können den Ordner "webfonts" direkt in Ihren öffentlichen / Ordner neben Ihrem CSS-Ordner kopieren. Auf diese Weise findet der großartige CSS-Code für Schriftarten die Schriftarten und Sie sind auf der sicheren Seite.
Mycodingproject
6

Was für mich funktionierte, war das Hinzufügen resolve-url-loaderund AktivierensourceMaps

Ich habe bereits font-awesome in meine Root- .scssDatei importiert :

@import "~font-awesome/scss/font-awesome";
...

Diese main.jsStammdatei wird in meine Datei importiert, die als Einstiegspunkt für Webpack definiert ist:

import './scss/main.scss';
...

Dann sehen meine endgültigen Regeln für das Webpack-Modul folgendermaßen aus:

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

Hinweis:

Ich habe verwendet mini-css-extract-plugin, die wie folgt registriert werden können:

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

url-loadermuss file-loaderinstalliert sein. Wenn Sie also einen Fehler wie: erhalten cannot find module file-loader, installieren Sie ihn einfach:

npm i -D file-loader

Nützliche Links :

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Exzellenz Ilesanmi
quelle
1

Für Version 5.14 hat Folgendes für mich funktioniert:

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
sdvlpr
quelle
0

v.4 (Symofony 4 + Webpack)

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';
Koudi
quelle