it-swarm.com.de

Wie lade ich font-awesome mit SCSS (SASS) in Webpack mit relativen Pfaden?

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

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

Die Webpack-Bundling-Kompilierung schlägt jedoch fehl

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

weil die Datei font-awesome.scss auf einen relativen Pfad "../fonts/" verweist.

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

55
Richard

Es scheint keinen Weg für @import-Dateien zu geben, die eigene relative Pfade in SCSS\SASS haben.

Also habe ich es geschafft, das zur Arbeit zu bekommen:

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

    import 'font-awesome/scss/font-awesome.scss'; 
  • Fügen Sie dies meiner webpack.config-Datei 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', 'css', 'sass']}, 
 {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"}, 
 ] 
 } 
23
Richard

Benutzen

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

wo die $fa-font-path Variable in font-awesome/scss/_variables.scss gesehen wird

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

Wie oben beschrieben: http://fontawesome.io/get-started/

109
user137794

Folgendes hat für mich gearbeitet:

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

Hiermit werden die font-awesome & erforderlichen Schriftarten in das Projekt importiert Andere Änderungen betreffen webpack-Konfigurationen, um die erforderlichen Schriftarten mit file-loader zu laden.

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

Durch Ändern meines app.scss gelöst:

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

Auf diese Weise können externe Abhängigkeiten unverändert und nicht versioniert bleiben.

11
Wilk

Ich habe nur 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';
6
ramon22

Was für mich funktionierte, war, resolve-url-loader hinzuzufügen und sourceMaps zu aktivieren.

Ich habe bereits font-awesome in meine .scss-Datei importiert:

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

Diese Stammdatei wird in meine main.js-Datei importiert, die als Eingangspunkt von Webpack definiert ist:

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

Dann sehen meine letzten Regeln für das Webpack-Modul so 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 mini-css-extract-plugin verwendet, der wie folgt registriert werden kann:

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

url-loader erfordert, dass file-loader installiert ist. Wenn Sie einen Fehler wie cannot find module file-loader erhalten, installieren Sie ihn einfach: 

npm i -D file-loader

Nützliche Links:

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

1

Anweisungen finden Sie unter der eckigen Website Include Font Awesome

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