Javascript Webpack - sass 加载器找不到图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33969872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack - sass loader cannot find images
提问by Luca Mormile
The sass loaderdoc says: "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.htmlin my project root, then I'm trying to load an imagefrom my scssfile.
Now I have 2 errors: 1) from Chrome's console: Cannot find module "./img/header.jpg". 2) from my terminal:
该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，然后我试图image从我的scss文件中加载一个。现在我有 2 个错误：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
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-loaderand 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
采纳答案by Luca Mormile
To solve this problem I've uploaded this webpack extremly basic configurationto start my projects, I hope it can help everyone who had this problem. Suggestions are all welcome of course.
为了解决这个问题，我上传了这个webpack 非常基础的配置来启动我的项目，我希望它可以帮助所有遇到这个问题的人。当然，欢迎大家提出建议。
回答by Wout De Rooms
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);
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-loaderto copy those files over.
请注意，如果您希望 webpack 将这些图像移动到您的分发文件夹（如果您使用的是这样的系统），您将需要类似file-loader复制这些文件的东西。
回答by Lukas Winter
You can use ignore-loaderif your images are already in the place where you need them. file-loader will copy the files to your output folder.
如果您的图片已经在您需要的地方，您可以使用ignore-loader。file-loader 会将文件复制到您的输出文件夹。
