node_modules 中的 webpack 4 图像：找不到模块

Question

问题

我正在使用 webpack 4 将 scss 编译为 css 并使用 MiniCssExtractPlugin 将 css 保存到不同的文件中。问题是，我无法加载通过 url() 包含在 scss 文件中的图像和字体。运行开发或生产之间也没有区别。 Scss 编译完美，没有任何问题。此外，scss-loader 从 node_modules.
加载 .scss 文件没有问题为什么会出现此错误，我该如何解决？

当运行 npm

时出现错误消息

ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
 @ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921

ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
 @ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840

还有多个，但都出现相同的错误，只是文件名发生了变化。

webpack-配置

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        // js: './ui/index.js',
        sass: './ui/index.scss'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'app')
    },
    resolve: {
        alias: {
            Utilities: path.resolve(__dirname, 'ui/js/')
        },
        extensions: ['.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
                loaders: [
                    {
                        loader: "file-loader",
                        options: {
                            name: loader_path => {
                                if(!/node_modules/.test(loader_path)) {
                                    return "app/images/[name].[ext]?[hash]";
                                }

                                return (
                                    "app/images/vendor/" +
                                    loader_path.replace(/\/g, "/")
                                        .replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
                                    '?[hash]'
                                );
                            },
                        }
                    }
                ]
            },
            {
                test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
                loaders: [
                    {
                        loader: "file-loader",
                        options: {
                            name: loader_path => {
                                if (!/node_modules/.test(loader_path)) {
                                    return 'app/fonts/[name].[ext]?[hash]';
                                }

                                return (
                                    'app/fonts/vendor/' +
                                    loader_path
                                        .replace(/\/g, '/')
                                        .replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
                                    '?[hash]'
                                );
                            },
                        }
                    }
                ]
            }
        ]
    },
    performance: {
        hints: false
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "bundle.css"
        })
    ]
}

Project Repo/Branch

Answer 1

您需要将 resolve-url-loader 添加到您的构建中，如下所示：

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        "resolve-url-loader",
        "sass-loader?sourceMap"
    ]
}

resolve-url-loader 正在根据导入资产的原始文件解析资产路径。

我在本地试过了，构建现在通过了:)干杯！

node_modules 中的 webpack 4 图像：找不到模块

webpack 4 images in node_modules : module not found

webpack-4

webpack-file-loader

问题

当运行 npm

webpack-配置

node_modules 中的 webpack 4 图像：找不到模块

webpack 4 images in node_modules : module not found

webpack-4

webpack-file-loader

问题

当 运行 npm

webpack-配置

当运行 npm