webpack mit font awesome

Question

in meiner react app Ich möchte Fontawesome CSS-Dateien mit Webpack und die CSS-Loader verwenden. meine Konfiguration sieht wie folgt aus:

webpack Config

module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     options: { 
      presets: [ 
      ["es2015", { modules: false }], 
      "stage-2", 
      "react" 
      ], 
      plugins: [ 
      "transform-node-env-inline" 
      ], 
      env: { 
      development: { 
       plugins: ["react-hot-loader/babel"] 
      } 
      } 
     } 
     }, { 
      test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/, 
      loaders: ['file'] 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      "style-loader", 
      { 
      loader: "css-loader", 
      options: { 
       modules: true, 
       sourceMap: true, 
       importLoaders: 1, 
       localIdentName: "[name]--[local]--[hash:base64:8]" 
      } 
      }, 
      "postcss-loader" // has separate config, see postcss.config.js nearby 
     ] 
     }, 
    ] 

in index.js Ich habe dies:

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

und in der Methode machen, ich habe dies:

<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar" 
             aria-hidden="true"></NavLink></li> 

Es gibt keine Fehler, aber auch keine Symbole angezeigt ... was ist mein Fehler?

Dank

Answer 1

Lösung, die für mich gearbeitet ist das hinzufügen CSS-Dateien in meinem www/index.html

dann kann ich die CSS wie folgt verwenden:

<div className={`row`}> 

Same mit Bootstrap und fontawesome

Answer 2

Möglicherweise müssen Sie einen Namen Argument für den Loader hinzugefügt, die die Schriftart-Dateien verarbeitet.

zB:

... 
{ 
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/, 
loader: 'file-loader?name=./[name].[hash].[ext]' 
}, 
... 

Answer 3

Wenn Sie mit Webpack 2, arbeiten you should always add the -loader suffix after each loader's name. Hier ist mein Teil des Codes, der richtig in meinem webpack.config.js funktioniert:

 { 
      test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      use:[{ 
       loader: 'url-loader', 
       options:{ 
        limit: 100000, 
        name: 'assets/resources/[name].[ext]' 
       } 
      }] 
     } 

Ich verwende url-loader, aber in diesem Fall sollte es auch mit file-loader arbeiten.

Answer 4

Nun, in meinem Fall, ich werde ein kleines Muster nach der Erweiterung für die url-loader und einige include/exclude Anweisungen hinzufügen.

Dies ist, weil wir verschiedene Werkzeuge für unsere CSS und importiert haben wollen.

Das Muster in url-loader hinzugefügt ist der Import von font-awesome.css zu handhaben, weil sie wie folgt aussehen: src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

Hier ist der Auszug meiner webpack.config.js Datei:

{ 
    test: /\.css/, 
    loaders: [ 
     'style-loader', 
     `css-loader?${JSON.stringify({ 
     sourceMap: isDebug, 
     // CSS Modules https://github.com/css-modules/css-modules 
     modules: true, 
     localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]', 
     // CSS Nano http://cssnano.co/options/ 
     minimize: !isDebug, 
     camelCase: 'dashes', 
     })}`, 
     'postcss-loader', 
    ], 
    exclude: [ 
     path.resolve(__dirname, './node_modules/font-awesome'), 
    ], 
    }, 

// ... 
    { 
    test: /\.css/, 
    loaders: [ 
     'style-loader', 
     'css-loader', 
    ], 
    include: [ 
     path.resolve(__dirname, './node_modules/font-awesome'), 
    ], 
    }, 
// ... 

{ 
    test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/, 
    loader: 'url-loader?limit=10000', 
},