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?
../../node_modules/font-awesome/fonts/fontawesome-webfont.eot
?Antworten:
Verwenden
$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome";
wo die
$fa-font-path
Variable in gesehen wirdfont-awesome/scss/_variables.scss
$fa-font-path: "../fonts" !default;
Die Tilde "~" wird vom Sass-Loader mithilfe des Webpack-Mechanismus interpoliert .
quelle
$fa-font-path: "font-awesome/fonts"
- dh ohne die Tilde einstellen .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:
Fügen Sie dies meiner Datei webpack.config hinzu:
quelle
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 Änderungwebpack
betrifft die Konfiguration, um die erforderlichen Schriftarten mit zu ladenfile-loader
.{ test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass' ], }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, loader: 'file' }
quelle
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.
quelle
_variables.scss
Datei nicht jedes Mal ändern musste, wenn ich das Projekt neu kompilierte. Es überschreibt nicht$fa-font-path
oder irgendeine andere Variable für diese Angelegenheit. Also nicht sicher, wie Sie es geschafft haben_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';
quelle
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_modules
in meinem Fall@fortawesome/fontawesome-free
quelle
Was für mich funktionierte, war das Hinzufügen
resolve-url-loader
und AktivierensourceMaps
Ich habe bereits font-awesome in meine Root-
.scss
Datei importiert :@import "~font-awesome/scss/font-awesome"; ...
Diese
main.js
Stammdatei 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-loader
mussfile-loader
installiert sein. Wenn Sie also einen Fehler wie: erhaltencannot find module file-loader
, installieren Sie ihn einfach:Nützliche Links :
https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904
quelle
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";
quelle
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';
quelle