'Font awesome' geeigneten Lader zu handhaben

Question

Ich versuche, Schriftart in meiner reactjs Anwendung enthalten und das sind die Schritte, denen ich folgte.

1. npm install --save font-awesome 

2. Import it to my jsx file 

import '../../../../../../node_modules/font-awesome/css/font-awesome.min.css'; 

3. Adding url-loader to my webpack.config.js 

      { 
       test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/, 
       loader: 'url-loader?limit=100000' 
      } 

Aber ich erhalte dieses issue.How ich dieses Problem beheben kann?

../~/font-awesome/css/font-awesome.min.css Modul fehlgeschlagen analysieren: C: \ Benutzer \ admin \ Dokumente \ revegator-Plattform \ node_modules \ font-awesome \ font \ css -awesome.min.css Unerwartetes Zeichen '@' (4: 3) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten.

Mein webpack.config.js

'use strict'; 
let path = require('path'); 

module.exports = { 
    entry: path.resolve('./src/main.js'), 
    output: { 
     path: path.resolve('../public/js'), 
     filename: 'build.js' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx', '.json'] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.s[a|c]ss$/, 
       loader: 'style-loader!css-loader!sass-loader' 
      }, 
      { 
       test: /\.(png|jpg|gif|svg)$/, 
       loader: 'file-loader', 
       options: { 
        name: '[name].[ext]?[hash]' 
       } 
      } 
     ] 
    } 
}; 

Answer 1

Offensichtlich unterstützen Sie sass in Ihrer App, also warum nicht font-awesome SCSS Ressourcen nutzen? Dies sollte Ihnen die Flexibilität geben, nur das zu laden, was Sie brauchen, um die endgültige CSS-Größe zu reduzieren.

Achten Sie darauf, die folgenden Pakete haben

npm i --dev "css-loader" "file-loader" "node-sass" "sass-loader" "style-loader" "url-loader" 

Update Ihr webpack.config folgende Lader

{ test: /\.s[a|c]ss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, 
    { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } }, 
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } }, 
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, 
    { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' } 

in Ihrer Komponente enthalten

import 'font-awesome/scss/font-awesome.scss'