-
-
Notifications
You must be signed in to change notification settings - Fork 481
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
EleventyHtmlBasePlugin not updating URLs in CSS files #3004
Comments
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 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 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 |
@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
The text was updated successfully, but these errors were encountered: