Webpack und Schriften: Modul parse failed

Ich versuche, FontAwesome in meiner app. Ich bin mit webpack zu tun, es ist Magie. Meine config ist:

  resolve: {
    //you can now require('myfile') instead of require('myfile.cjsx')
    extensions: ['', '.js', '.jsx', '.cjsx', '.coffee']
  },
  module: {
    loaders: commonLoaders.concat([
      { test: /\.css$/, loader : 'style-loader!css-loader' },
      { test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' },
      { test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
      { test: /\.coffee$/, loader: 'coffee' },
      { test: /\.jsx$|\.js$/, loader: 'jsx-loader?harmony' },
    ])
  }

Ich bin ersuchenden FontAwesome CSS so:

require "../../styles/font-awesome.min.css";

font-awesome.min.css-enthält: 

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Und für einige Grund, WebPack versucht zu analysieren .woff-Datei mit style-loader und gibt mir Fehler: 

ERROR in ./src/fonts/fontawesome-webfont.woff
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.woff Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./src/styles/font-awesome.min.css 2:73-117

Ich bin wirklich verloren jetzt. Irgendwelche Ideen?

Update:
Ich bin völlig verloren jetzt. Ich habe beschlossen, zum herumtollen mit meiner config und setzen Sie diese Zeile in die Lader:

{ test: /\.eot$/, loader : 'file' },

Und benötigt diese Datei: 

require "../../fonts/fontawesome-webfont.eot";

Erhielt den Fehler:

ERROR in ./src/fonts/fontawesome-webfont.eot
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.eot Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Allerdings, wenn ich versuchte, Sie zu benötigen meinen-Datei wie folgt:

require "file!../../fonts/fontawesome-webfont.eot";

Ging alles glatt. Sieht aus wie webpack ignoriert mein Lader?

InformationsquelleAutor Markov | 2015-12-02
  1. 6

    1. kommt es auf die url in css.

    2. dieser Fehler ist rund um regex zu ändern versuchen (\?[a-z0-9]+) zu (\?v=[0-9]\.[0-9]\.[0-9]) oder (\?[\s\S]+).

    Beispiel:

    https://github.com/gowravshekar/font-awesome-webpack

    module.exports = {
       module: {
         loaders: [
         //the url-loader uses DataUrls.
         //the file-loader emits files.
           { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
           { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
      }
    };

    https://github.com/shakacode/font-awesome-loader

    module.exports = {
  module: {
    loaders: [
      //the url-loader uses DataUrls.
      //the file-loader emits files.
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        //Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
        //loader: "url?limit=10000"
        loader: "url"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        loader: 'file'
      },
    ]
  }
};
    InformationsquelleAutor tellxp
  2. 2

    Den anderen Tag füge ich die font-awesome durch die LESS-also im Grunde 

    npm install --save less-loader
bower install --save components-font-awesome

    Dann formuliere ich die font awesome wie dieses

    require('bower_components/components-font-awesome/less/font-awesome.less')

    Und schließlich in die webpack.config.js ich Sie das loader-Module

    var path = require('path')

module.exports = {

    ...

    , module: {
        loaders: [
            {test: /\.less$/, loader: "style!css!less"},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ]
    } 
};

    Ich weiß, dass es nicht das gleiche mit .css aber ich glaube, dass Ihr einfach auf diese Weise. Hoffe, es hilft.

    InformationsquelleAutor mariowise
Schreibe einen Kommentar