Webpack - sass 加载器找不到图像答案

【问题标题】：Webpack - sass loader cannot find imagesWebpack - sass 加载器找不到图像
【发布时间】：2016-03-02 09:25:55
【问题描述】：

sass loader 文档说："If you're just generating CSS without passing it to the css-loader, it must be relative to your web root"。所以我照它说的做了，我的project root 中有我的index.html，然后我试图从我的scss 文件中加载一个image。现在我有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

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> 中，因此我已将图像的路径指向我的根目录，如文档所述，但仍然无法修复它。

更新： 我已经安装了file-loader 并按照说明操作，现在我在控制台中收到此错误：GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

【问题讨论】：

问题可能出在 bower_components 目录上？我在这里遇到了类似的字体问题：stackoverflow.com/questions/33733370/…
我面临着类似的问题。我已经安装了 url-loader、file-loader 但仍然出现错误 localhost:8080/97e0c94dad5b497783b1400e27dfdcbb.jpg 404 (Not Found)

标签： javascript css node.js webpack sass-loader

【解决方案1】：

为了解决这个问题，我上传了这个webpack extremly basic configuration 来开始我的项目，我希望它可以帮助遇到这个问题的每个人。当然欢迎大家提出建议。

【讨论】：

当您想链接外部资源时，请在Stackoverflow上添加相关部分，因为链接可能不可用。

【解决方案2】：

如果您的图片已经在您需要的地方，您可以使用ignore-loader。 file-loader 会将文件复制到您的输出文件夹。

【讨论】：

【解决方案3】：

据我所知，您实际上是在使用 css 加载器（"style", "css", "sass", "resolve-url"）（“css”部分是“css-loader”）

在您的 sass 文件中，您应该使用正在编辑的 sass 文件的相对路径链接到图像。

styles
 - somefile.scss
 - another.scss
images
 - someImage.jpg

在 somefile.scss 中，您应该像这样链接到您的图像：

background-image: url("../images/someImage.jpg);

请注意，如果您希望 webpack 将这些图像移动到您的分发文件夹（如果您使用的是这样的系统），您将需要像 file-loader 这样的东西来复制这些文件。

【讨论】：

我试图将我的 scss 文件指向我的 img 文件夹执行 url(../img/header.jpg) 但这次我收到另一个错误： ./public/img/ 中的错误header.jpg 模块解析失败：C:\Web-Development\React\Portfolio\public\img\header.jpg 第 1 行：意外令牌非法您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码）@ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-92
这就是你需要文件加载器的原因。就像你的 scss 文件一样，你需要指定一个测试和一个加载器（在这种情况下是文件加载器）
好的，我在 webpack.config.js 中添加了{ test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }，但现在在 Chrome 的控制台中我得到了一个不同的错误：GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119。对于所有这些问题，我很抱歉，我最近才开始使用所有这些工具
@LucaMormile 很好的问题，看起来 Wout 已经解决了最初的问题？如果是这样，将其标记为“已接受”对社区有帮助:)
嗨@Ben，很抱歉，因为现在我无法尝试 Wout 的答案（没时间研究 ReactJS :(()，但我刚刚写了一个答案，其中包含指向我的 webpack 配置的链接解决了我的问题的文件。