Webpack5 config with SCSS @import inside another SCSS files error

Question

When I use @import directive in SCSS file the imported file relative paths are calculated as relative path of SCSS file imported with JS.

fs structure:

/script.js
/subfolder/
 /image.png
 /substyle.scss
/webpack.config.js

webpack.config.js

module.exports = {
  mode: 'production',
  entry: './script.js',
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/i,
        use: 'css-loader'
      }
    ]
  }
}

script.js

import './style.scss'

style.scss

@import "subfolder/substyle";

subfolder/substyle.scss

body{
  background: url(image.png);
}

Result:

Module not found: Error: Can't resolve 'image.png' in 'E:\webpacktest'
resolve 'image.png' in 'E:\webpacktest'
  Parsed request is a module
  using description file: E:\webpacktest\package.json (relative path: .)
    using description file: E:\webpacktest\package.json (relative path: ./image.png)
      no extension
        E:\webpacktest\image.png doesn't exist
      as directory
        E:\webpacktest\image.png doesn't exist
    resolve as module
      looking for modules in E:\webpacktest\node_modules
        single file module
          using description file: E:\webpacktest\package.json (relative path: ./node_modules/image.png)
            no extension
              E:\webpacktest\node_modules\image.png doesn't exist
        E:\webpacktest\node_modules\image.png doesn't exist
      E:\node_modules doesn't exist or is not a directory

Answer 1

I've found a solution.

Additional loader should be added in list before sass-loader.

{ loader: 'resolve-url-loader', options: { sourceMap: true } }