How can i call a background url in scss file? - webpack-4

Question

I'm trying to call a background URL in an scss file but webapack give me an error of compilation.
My project structur is :
dist
bundle.js
main.css
src
public
assets
css
scss
components
myfile.scss (insid components)
main.scss
img
js
index.html
app.js
webpack.config.js
This is the code which contains the error:
&:after{
content:"";
background: url('./../../../img/curve3.png') 100%;
position: absolute;
bottom:0;
left: 0;
right: 0;
height: 170px;
}
This is what I got from the webpack console:
ERROR in ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss)
Module not found: Error: Can't resolve './../../../img/curve3.png' >in >'/Users/retinas/Documents/Devloppement/static/um6/src/public/assets/css>/scss'
# ./src/public/assets/css/scss/main.scss (./node_modules/css->loader/dist/cjs.js??ref--5-2!./node_modules/resolve-url->loader!./node_modules/postcss-loader/src??postcss!./node_modules/sass->loader/lib/loader.js!./src/public/assets/css/scss/main.scss) 23:42-78
My webpack config :
const path = require('path');
const dev = process.env.NODE_ENV === 'dev';
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/app.js",
watch: dev,
devServer: {
contentBase: path.resolve('./'),
publicPath: '/assets/',
port: 3000
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
module : {
rules : [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'eslint-loader',
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{ loader: 'css-loader?url=false', options: { importLoaders: 1 } },
{ loader: 'resolve-url-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('autoprefixer')({
browsers : ['last 2 versions', 'ie > 8']
}),
]
}
},
'sass-loader'
]
})
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [
new ExtractTextPlugin({
filename : '[name].css',
disable : dev
}),
]
}
Thanks for your help

Answer 1

Finally, I found the solution of the problem, it was in the URL path it should be like this:
background: url('./../../img/curve3.png') 100%;
not this :
background: url('./../../../img/curve3.png') 100%;
I should began from the main.scss not from myfile.scss
Thanks.