search

netlify-templates / victor-hugo

Victor Hugo is a Hugo boilerplate for creating truly epic websites!
MIT License
1.53k stars 379 forks source link

Font and image files 404 #159

Open smth opened 5 years ago

smth commented 5 years ago

Bug?

What is the current behaviour? File references get renamed, e.g 0c14c1b92c496ac5be56401afbcc3a03.png, and then 404. Generated paths are at root e.g localhost:3000/0c14c1b92c496ac5be56401afbcc3a03.png

Steps to reproduce Add a background image, or font-face in CSS.

Expected behaviour Files do not 404, or (this whole process doesn't happen, and) original file references used.

Versions Node v11.8.0 npm v6.5.0 Hugo v0.5 OSX 10.14.2

SuperMrBlob commented 5 years ago

As a workaround I've ended up putting static files (e.g. images, fonts) in the /site/static directory (e.g. /site/static/images/foo.jpg) and referencing them directly in html (e.g. src="/images/foo.jpg"). Of course it would be much nicer if we could reference fonts and images in e.g. src/fonts directory and get Webpack to hash the names, rename the references in the css or html and pop them into dist to make them accessible from the static site. One benefit is that I wouldn't have to remember which static files I'm using and which I am not using, as Webpack just wouldn't copy over the files that I'm not using into /dist.

vinicio commented 4 years ago

A fix that worked for me was to change the file-loader params in webpack.common.js to add publicPath and outputPath options:

module: {
    rules: [
      {
        test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader?name=[hash].[ext]&publicPath=static&outputPath=static",
      },
...