Tengo mi scss y mis imágenes en carpetas al mismo nivel.
Estructura de archivos
styles app.scss images my-image.jpgEstoy tratando de importar mi imagen así
app.scss
body { background: url(../images/my-image.jpg); }Tengo una configuración de paquete web simple para cargar scss e imágenes.
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", }, ], }, };Más tarde traté de usar resolve-url-loader entre css-loader y scss-loader, lo que parecía prometedor. Pero también en vano.
La compilación no arroja ningún error. Pero la página no abre la imagen.
Gracias por cualquier ayuda que me brinden mis bros y bronettes.
Al final, el problema con las imágenes estaba simplemente en publicPath en el archivo web.config.js.
Cambiarlo de dist/ a /dist hizo el trabajo.
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, }, ... };Que esto sea una advertencia para todos los que ingresan a webpack.