Cannot resolve relative URL - css

Question

When I use a relative url in an SCSS file (I am trying to set the background-image property to a local file), I receive the following error:
Any idea how what is going wrong?
I have a project with the following structure:
public/
dist/
images/
wave.png
index.html
src/
components/
MyComponent.js
app.js
styles/
base/
components/
_my-component.scss
styles.scss
webpack.config.js
In MyComponent.js I render <div className="bg"></div>.
In _my-component.scss I have:
.bg {
background-image: url("/images/wave.png");
}
And in webpack.config.js I have:
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env) => {
const isProduction = env === "production";
return {
entry: ["./src/app.js"],
output: {
path: path.join(__dirname, "public", "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css"
})
],
devtool: isProduction ? "source-map" : "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "public"),
historyApiFallback: true,
publicPath: "/dist/"
}
};
};

Answer 1

In _my-component.scss, directories are only relative to this file. According to your directory tree, you would need to go up 2 directories, which is essentially back to the root/home directory, and then one directory down to the public folder.
Try this path in your script: ../../public/images/wave.png