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

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?

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 .

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"},
        ]]
    }}

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'
}

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.

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';

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

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

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";

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';