webpack 4 images in node_modules : module not found

问题

The problem

Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production. Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?

error-message when running 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

And multiple more, but all have the same error, just the filename changes.

webpack-Config

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

回答1:

You need to add resolve-url-loader to your build, like this:

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

resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.

I tried it locally and the build is now passing :) Cheers!

来源：https://stackoverflow.com/questions/52010057/webpack-4-images-in-node-modules-module-not-found