basepath does not work on css
#basePath and css url()
hushed chasm
gentle vectorBOT
Hi @hushed chasm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The knowledge sources do not provide explicit documentation or guidance on how Next.js's basePath interacts with CSS url() references. However, there are related issues and documentation that suggest basePath is not automatically applied to asset URLs inside CSS files.
- The official documentation for basePath explains that it is automatically applied to routes and links created with next/link and next/router, but for images (using next/image), you must manually add the basePath to the src attribute. There is no mention of automatic handling for CSS url() references, which implies you need to manually adjust these paths as well basePath documentation.
- A related GitHub issue about static HTML export and asset paths notes that asset paths like /vercel.svg do not work when opening the exported HTML directly, and changing them to relative paths (e.g., ./vercel.svg) can break development. This further suggests that asset path handling in CSS is not automatically managed by basePath, and manual adjustments or workarounds are often needed GitHub Issue: Docs: Explain asset path configuration in static html export.
In summary:
basePath is not automatically prepended to URLs in CSS url() references. You need to manually adjust these paths to include the basePath if your assets are served from a sub-path. This is a known limitation and may require custom handling in your build process or CSS files.