'Font awesome' loader approprié à gérer

Question

J'essaie d'inclure la police génial dans mon application reactjs et ce sont les étapes que j'ai suivies.

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

Mais je reçois ce problème.Comment puis-je résoudre ce problème?

../~/font-awesome/css/font-awesome.min.css Module parse failed: C: \ Users \ admin \ Documents \ revegator-platform \ node_modules \ font-awesome \ css \ police -awesome.min.css Caractère inattendu '@' (4: 3) Il se peut que vous ayez besoin d'un chargeur approprié pour gérer ce type de fichier.

Mes 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

De toute évidence, vous soutenez SASS dans votre application, alors pourquoi ne pas utiliser les ressources SCSS police-awesome? Cela devrait vous donner la flexibilité de ne charger que ce dont vous avez besoin, réduisant ainsi la taille finale des css.

Assurez-vous que vous avez les packages suivants

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

mise à jour de votre webpack.config pour contenir les chargeurs suivants

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

dans votre composant

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