Обрабатывать изображение в SCSS с помощью Webpack

Question

У меня проблема при создании конфигурации webpack

Это моя конфигурация:

  module: {
rules: [
  {
    test: /\.js$/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ['babel-preset-env']
      }
    }
  },
  {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader"
    ]
  },
  {
    test: /\.(jp(e)?g|png|gif|svg)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: 'css/images/[name].[ext]'
      }
    }
  }
]

}

и это структура файла:

src/index.js
src/scss/style.scss
src/scss/component/header.scss

Содержимое index.js

import "./scss/style.scss";

и это index.scss

 @import "./components/header";
 body{
  background: url("./images/bg.jpg");
  color: red;
 }

header.scss

header{
  background: url('./images/headerbg.png');
}

После запуска я получил эту проблему:

ERROR in ./src/scss/style.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss)
    Module not found: Error: Can't resolve './images/headerbg.png' in '/Volumes/MacData/Workspace/Projects/learncode/webpack/webpack02/src/scss'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss 7:65-97

Я не знаю причину, пожалуйста, помогите мне, спасибо!

Answer 1

Я нашел решение для этой проблемы: resol-url-loader

Это документы для этой проблемы: https://webpack.js.org/loaders/sass-loader/#problems-with-url-