Sass 网页包：无法解析模块'；文件加载器'；

当我尝试使用webpack构建SASS文件时，我遇到以下错误：

未找到模块：错误：无法解析模块“文件加载程序”

请注意，只有当我尝试使用相对路径加载背景图像时，才会出现此问题

这项工作很好：

  background:url(http://localhost:8080/images/magnifier.png);

这导致了以下问题：

   background:url(../images/magnifier.png);

这是我的项目结构

• 图像
• 风格
• webpack.config.js

这是我的网页文件：

var path = require('path');
module.exports = {
    entry: {
        build: [
            './scripts/app.jsx',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ]
    },
    output: {
        path: path.join(__dirname, 'public'),
        publicPath: 'http://localhost:8080/',
        filename: 'public/[name].js'
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.(png|jpg)$/, loader: 'file-loader'},
            {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
        modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
    }
};

---

正如@silvenon在评论中所说：

您是否安装了文件加载器

是文件加载器已安装但已损坏，我的问题已通过重新安装解决

---

npm安装--save dev file loader

我有一个完全相同的问题，下面修复了它：

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"

---

谢谢你，这是最后一件要买的东西 Bootstrap、d3js、Jquery、base64内联图像和我自己写得很糟糕的JS，这些都是用来玩webpack的

回答上面的问题以及绕过问题的解决方案
未找到模块：错误：无法解析模块“url” 编译引导字体时

{ 
test: /glyphicons-halflings-regular\.(woff2|woff|svg|ttf|eot)$/,
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]"
}

---

谢谢

如果使用定义了

限制的
url加载器
，您可能会遇到非常类似的问题，如果您尝试加载的资源超过此限制，则
文件加载程序将用作回退。因此，如果未安装
文件加载器
，将提示错误。若要修复此错误，请将此限制设置为更大的值，或者根本不定义它

{
测试：/\（jpg | png | svg）$/，
使用：{
加载器：“url加载器”，
选项：{
限制：50000，//确保此数字足够大，可以加载您的资源，或者根本不定义它。
}
}
}
css加载器将每个
url（…）
转换为
require（…）
，因此
。/images/magnifier.png
由
/\（png | jpg）$/
测试拾取。你安装了文件加载器吗？@silvenon，谢谢你的回复文件加载器坏了，所以我重新安装了它，一切都会好起来的。谢谢这看起来很有用，但是我很难用其他加载器配置将它映射到webpack.config。你能提供一个更完整的例子吗？你是说像这样吗<代码>{test://\（png | jpg）$/，加载器：require.resolve（“文件加载器”）+“？name=../[path][name].[ext]”}
Hi@Ihahne，你用过纱线吗？我也有同样的问题，我只能用这个命令来解决。但是我不知道为什么。对于那些想使用的人：你也必须为它安装，所以运行
npm install--save dev file loader
。如果我不想让webpack加载文件呢？我不需要网页来检查图片是否真的存在于dist文件夹中。谢谢！花了很长时间试图修复一个类似的错误，其中/node_modules/@ionic/core/dist/ionic/svg/index.js在尝试运行单元测试时出现错误，并且仅在使用ionic platform时发生。谢谢！在我安装它之后为我工作。