当我尝试使用Webpack构建***SASS***文件时,出现以下错误:
找不到模块:错误:无法解析模块'file-loader'
请注意,只有当我尝试使用相对路径加载背景图像时,才会出现此问题。
此工作很好:
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']
}
};
6条答案
按热度按时间btxsgosb1#
正如@silvenon在评论中所说:
您是否安装了文件加载程序?
是的,***文件加载程序***已安装,但已损坏,通过重新安装,我的问题已得到解决。
npm install --save-dev file-loader
4xy9mtcn2#
如果您使用的
url-loader
具有已定义的limit
配置,您可能会遇到非常类似的问题。As the documentation states,如果您尝试加载的资源超过此限制,则file-loader
将用作备用。因此,如果您没有安装file-loader
,则会出现错误提示。要修复此错误,请将此限制设置为更大的值或根本不定义它。r1zhe5dt3#
我有完全相同的问题和以下修复它:
jhdbpxl94#
感谢这一点-这是最后一块得到Bootstrap,d3 js,Jquery,base64内联图像和我自己写得很差的JS玩webpack。
要回答上述问题和解决问题的方法
**找不到模块:错误:无法解析模块'url'**编译引导字体时
谢谢你!
tzxcd3kk5#
如果在运行jest时遇到此问题,请将其添加到moduleNameMapper中
ne5o7dgx6#
通过安装
url-loader
(例如:run 'npm install url-loader --save-dev'