node_modules中的webpack 4映像:找不到模块 [英] webpack 4 images in node_modules : module not found

问题描述

我使用webpack 4将scs编译为css，并使用MiniCssExtractPlugin将css保存到其他文件中.问题是，我没有设法加载图像和字体，这些图像和字体是通过scss文件内部的url()包含的.运行开发或生产之间也没有区别. Scss编译完美，没有任何问题.同样，scss-loader也可以从node_modules加载.scss文件. 为什么会发生此错误，我该如何解决?

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 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.

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"
        })
    ]
}

项目存储库/分支

推荐答案

您需要添加解决-url-loader 到您的构建，如下所示:

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正在基于导入资产的原始文件解析资产的路径.

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!

这篇关于node_modules中的webpack 4映像:找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！