css – Webpack无法加载字体文件:意外令牌

前端之家收集整理的这篇文章主要介绍了css – Webpack无法加载字体文件:意外令牌前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个style.css文件,使用一个字体文件。我无法获取使用Webpack加载的字体文件。这里是我的loader配置。
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'*/
    ]

我收到的错误

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

它看起来我认为Webpack将它作为一个CSS文件,当它不是。但我很确定测试表达式为字体文件传递

解决方法

测试表达式中的正则表达式有一个小错误。 woff(2)意味着它总是寻找woff2,并且在一个单独的组中捕获2。如果你添加?之后,webpack应该能够识别woff:
test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'

请让我知道这是否有效。

猜你在找的CSS相关文章