Webpack - sass loader无法找到图像
[英]Webpack - sass loader cannot find images
问题描述
The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root" . 
sass loader doc说： "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root" 。 So i did as it tells, I have my index.html in my project root , then I'm trying to load an image from my scss file. 所以我按照它说的做了，我在我的project root有我的index.html ，然后我正在尝试从我的scss文件加载image 。 Now I have 2 errors: 1) from Chrome's console : Cannot find module "./img/header.jpg" . 现在我有2个错误：1）来自Chrome's console ： Cannot find module "./img/header.jpg" 。 2) from my terminal : 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 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]"
}
]
}
};
If I see my code, I can clearly see that my css lives inside <head> so I've pointed my image's path to my root, as documentation says, but still can't fix it. 如果我看到我的代码，我可以清楚地看到我的css位于<head>内部，所以我已经将我的图像路径指向我的根，正如文档所述，但仍无法修复它。
UPDATE: I've installed file-loader and followed the instructions, now I get this error in console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119 更新：我已经安装了file-loader并按照说明操作，现在我在控制台中收到此错误： GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
3 个解决方案
解决方案1
6 2015-11-28 15:11:21
As far as I can see you are actually using the css loader ( "style", "css", "sass", "resolve-url" ) (the "css" part is the "css-loader") 据我所知，你实际上使用的是css加载器（ "style", "css", "sass", "resolve-url" ）（“css”部分是“css-loader”）
In your sass file(s) you should link to the images using a relative path from the sass file you are editing. 在您的sass文件中，您应该使用您正在编辑的sass文件中的相对路径链接到图像。
styles
- somefile.scss
- another.scss
images
- someImage.jpg
in somefile.scss, you should link to your image like this: 在somefile.scss中，你应该像这样链接到你的图像：
background-image: url("../images/someImage.jpg);
Do note, that if you want webpack to move those images to your distribution folder (if you are using a system like this) that you will need something like file-loader to copy those files over. 请注意，如果您希望webpack将这些图像移动到您的分发文件夹（如果您使用的是这样的系统），您将需要像file-loader这样的file-loader来复制这些文件。
解决方案2
1 2016-04-14 17:44:41
You can use ignore-loader if your images are already in the place where you need them. 如果您的图像已经位于您需要的位置，则可以使用ignore-loader 。 file-loader will copy the files to your output folder. file-loader会将文件复制到输出文件夹。
解决方案3
1 已采纳 2016-04-27 07:17:49
To solve this problem I've uploaded this webpack extremly basic configuration to start my projects, I hope it can help everyone who had this problem. 为了解决这个问题，我已经上传了这个webpack极端基本配置来启动我的项目，我希望它可以帮助每个遇到这个问题的人。 Suggestions are all welcome of course. 当然欢迎提出建议。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.