Open tedw opened 1 year ago
Having this same issue - curious if you solved this for your own purposes, @tedw
@ezramechaber I ended up removing the HTML plugin and doing it via Webpack, since my project already used it.
I stored the URL prefix in a custom data file so I could reference it in my templates and in the Webpack config file. It defaults to /
locally but is changed to /example/
in production.
src/data/app.js
const app = {
url: process.env.NODE_ENV == 'production' ? '/example/' : '/',// must end with trailing slash
};
module.exports = app;
Example usage in template:
<link rel="apple-touch-icon" sizes="180x180" href="{{ app.url }}apple-touch-icon.png">
I then imported my data file into the Webpack config so I can prefix publicPath
with app.url
in production.
webpack.config.js
// Import app.js so we can get the URL prefix
const app = require('./src/data/app.js');
const isDev = process.env.NODE_ENV == 'development';
module.exports = {
// Note: This is a simplified example, you’ll need to add `plugins`, `module`, etc. for it to work (see https://github.com/clenemt/eleventy-webpack)
mode: isDev ? 'development' : 'production',
entry: {
main: [
path.resolve(__dirname, 'src/assets/scripts/main.js'),
path.resolve(__dirname, 'src/assets/styles/main.scss')
]
},
output: {
filename: isDev ? '[name].js' : '[name].[contenthash].js',
path: path.resolve(__dirname, '_site/assets'),
publicPath: isDev ? '/assets/' : `${app.url}assets/`,// <-- This is where I update the path
},
resolve: {
alias: {
// Helpful alias for importing assets
assets: path.resolve(__dirname, 'src/assets')
}
}
};
@tedw thanks for writing this up!
Because my css folder was a subfolder of assets, which was the parent folder i needed to access, I solved using ../fonts
to get assets/fonts
.
@ezramechaber No prob! I should note the original reason I was trying to change the path was because my client wanted their Eleventy microsite to live in a subdirectory of their existing main site. This is why I needed different URL paths locally than in production. Normally, using a relative path to the font files works fine for me, just like your solution.
Operating system
macOS 13.3.1
Eleventy
2.0.1
Describe the bug
I just tried using the HTML plugin for the first time and it worked great—except it didn’t update any URLs in my CSS file.
For example, I’m using
@font-face
to load some web fonts:However the generated code lacks the
pathPrefix
resulting in 404s (both locally and after building):Not sure what the best way is to address this. For the time being I’m manually updating the paths in the generated files but would love to find a more automated solution.
Reproduction steps
pathPrefix
to anything@font-face
Expected behavior
I’d love to find a way to auto update all URLs in CSS files. At the very least, I think it would be helpful to add a note about this in the HTML base docs.
Thanks!
Reproduction URL
No response
Screenshots
No response