lightningcss
lightningcss copied to clipboard
Lightning with Astro: Can't resolve background-image path
While using Lightning with Astro, whether I reference an image from assets or public, it returns a 404. I get this message upon build:
UoptTW referenced in /Volumes/Evo/Sites/mysite/src/pages/news/index.astro?astro&type=style&index=0&lang.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
Referencing it from Astro's public directory:
<style is:global>
entry-image {
background: url(/images/image.png);
}
</style>
At build I get: background:url(UoptTW). However, no UoptTW file is ever generated. Besides, any file within Astro's public directory shouldn't be transformed.
I also tried installing the vite-plugin-lightningcss, but it didn't matter.
// astro.config.mjs
export default defineConfig({
vite: {
css: {
devSourcemap: true,
transformer: "lightningcss",
lightningcss: {
drafts: {
customMedia: true,
},
include: Features.Nesting,
minify: false,
sourceMap: true,
},
},
build: {
cssMinify: "lightningcss",
},
},
})
BTW, if I swap out Lightning with PostCSS, I don't have this issue.