Question

我正在与webpack4一起进行React项目。我在js文件中添加了导入代码：

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

之后，我在编译时遇到以下错误。

        ERROR in ./css/waffle/waffle.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js!./css/waffle/waffle.scss)
        Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in 'TheFrontEnd/css/waffle'

我进行了一些搜索，看来用于解决路径的配置有问题，但是我已配置webpack以使用加载woff2文件。以下是webpack中的加载程序配置：

module: {
            rules: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules)/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'resolve-url-loader',
                        'postcss-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader!resolve-url-loader']
                },
                {
                    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?limit=10000'
                },
                {
                    test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?name=[name].[ext]'
                },
                {
                    test: /\.html?$/,
                    use: [
                        {
                            loader: 'html-loader',
                            options: {
                                attrs: false
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    loader: 'url-loader?limit=10000'
                } // load small <10kb images into base 64 into css
            ]
        },

此路径../fonts/fontawesome-webfont.woff2?v=4.7.0是node_modules/font-awesome/css/font-awesome.css的引用。我该如何运作？谁能看到我的配置有问题吗？

Answer 1

这不是加载程序问题，而是解决程序问题。我遇到了几次，但从未让患者仔细检查过。我怀疑它的webpack对于.scss用例没有足够好的解析程序设置。

无论如何，这是我的快速解决方案：

找出该字体文件的确切绝对路径是什么
为其添加别名

webpackConfig = {
  reaolve: {
    alias: {
      'fonts/fontawesome-webfont.woff2': '/abs/to/to/that/woff2'
    ...
}

如何处理webpack4中的前端URL加载问题？

1 个答案: