Webpack - загрузчик sass не может найти изображения

В документе 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 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>, поэтому я указал путь к своему корню, как говорит документация, но по-прежнему не может его исправить.

UPDATE: Я установил file-loader и выполнил инструкции, теперь я получаю эту ошибку в консоли: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

Ответы

Ответ 1

Чтобы решить эту проблему, я загрузил эту webpack экстремально базовую конфигурацию, чтобы начать мои проекты, надеюсь, это поможет всем, у кого возникла эта проблема, Конечно, предложения приветствуются.

Ответ 2

Насколько я вижу, вы фактически используете загрузчик 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);

Обратите внимание, что если вы хотите, чтобы веб-пакет перемещал эти изображения в свою папку распространения (если вы используете такую ​​систему), вам понадобится нечто вроде file-loader для копирования этих файлов.

Ответ 3

Вы можете использовать ignore-loader, если ваши изображения уже находятся там, где они вам нужны. файл-загрузчик скопирует файлы в вашу выходную папку.