I have my scss and my images in folders at the same level.
File structure
styles
app.scss
images
my-image.jpg
Am trying to import my image like so
app.scss
body {
background: url(../images/my-image.jpg);
}
I have a simple webpack configuration to load scss and images.
webpack.config.js
const path = require("path");
module.exports = {
entry: "./resources/index.js",
resolve: {
alias: {
resource: path.resolve(__dirname, "resources/images"),
},
},
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist",
filename: "main.js",
assetModuleFilename: "[name][ext][query]",
clean: true,
},
mode: "production",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg)/,
type: "asset",
},
],
},
};
Later on I tried to use resolve-url-loader between css-loader and scss-loader which seemed promising. But also to no avail.
The build isn't throwing any errors. But the page doesn't open the image.
Thank you for any help you give me my bros and bronettes.
At the end the problem with the images was simply in the publicPath on the web.config.js file.
Changing it from dist/ to /dist did the job.
const path = require("path");
module.exports = {
...
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "dist/", //This is where the issue was
filename: "main.js",
assetModuleFilename: "[name][ext][query]",
clean: true,
},
...
};
Let this be a warning for all ye who enter webpack.