Webpack-Sass加载程序找不到图像

一尘不染

Webpack-Sass加载程序找不到图像

node.js

该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

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

阅读 301

2020-07-07

共1个答案

一尘不染

为了解决这个问题，我已经上传了这个webpack的基本配置以启动我的项目，希望它可以对遇到此问题的所有人有所帮助。当然欢迎提出建议。

2020-07-07