web-dev-qa-db-fra.com

Webpack ne peut pas charger le fichier de police: jeton inattendu

J'ai un fichier style.css qui utilise un fichier de police et je ne parviens pas à charger le fichier de police à l'aide de Webpack. Voici la configuration de mon chargeur:

    loaders    : [
        {
            test    : /\.(js|jsx)$/,
            exclude : /node_modules/,
            loader  : 'react-hot!babel-loader'
        }, {
            test   : /\.styl/,
            loader : 'style-loader!css-loader!stylus-loader'
        }, {
            test   : /\.css$/,
            loader : 'style-loader!css-loader'
        }, {
            test   : /\.(png|jpg)$/,
            loader : 'url-loader?limit=8192'
        }, {
            test   : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
            loader : 'file-loader'
        }
        /*}, {
         test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader : 'url-loader?limit=10000&minetype=application/font-woff'*/
    ]

Les erreurs que je reçois sont

ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt 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/fonts/icon/style.css 2:293-331

Il me semble que Webpack le prend comme un fichier CSS alors que ce n’est pas le cas. Mais je suis presque sûr que l'expression test passe pour le fichier de police

cssfontswebpack
45
Angela

La regex dans votre expression test a une petite erreur. woff(2) signifie qu'il recherche toujours woff2 et capture juste le 2 dans un groupe séparé. Si vous ajoutez un ? après cela, webpack devrait pouvoir reconnaître woff également:

test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'

S'il vous plaît laissez-moi savoir si cela a fonctionné.

65
nils

Cela a fait le tour pour moi:

{ 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" },
3
svassr