After reading numerous posts regarding CSS background images not loading, I believe my situation is unique.
Here is how I've configured my webpack setup (relevant parts only):
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}
]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
}
]
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader",
options: {
includePaths: [
path.resolve(__dirname, "assets", "less")
]
},
}
],
exclude: /node_modules/
}
I have set my public path like this:
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js",
publicPath: "public/"
},
When I build the webpack file, everything is moved to the /public directory correctly and styles are rewritten properly. Even though I can manually locate the image that is not loading in the public directory, one particular style appears messed up:
.section-intro {
background: url(public/76d7fa525cc5b3d641b9f774b7a79c92.png) center center no-repeat;
background-size: cover;
}
I suspected that it wasn't being set correctly, but hovering over the style in Chrome seems to indicate otherwise - it displays
localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.pngOther elements, like fonts, load fine. However, when I manually try to access
localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.pngIn my express server, I have this line:
this.app.use(express.static(path.resolve(__dirname, "..", "public")));This should allow me to view the images, right?
I'm unsure whether this issue lies on the Express or Webpack side, but it's causing quite a bit of frustration. Any help would be greatly appreciated.
Thank you!