i have a project where i have created a /pages/404.astro page, css is not being applied to that page
#404.astro inside /pages folder does not have css applied
warm garnet
hollow egretBOT
Hi @warm garnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro supports importing CSS files directly into your application. Imported styles expose no exports, but importing one will automatically add those styles to the page. This works for all CSS files by default, and can support compile-to-CSS languages like Sass & Less via plugins. Here is how you can do it:
// Load and inject 'style.css' onto the page
import './style.css';
You can also use the <link> element to load a stylesheet on the page. This should be an absolute URL path to a CSS file located in your /public directory, or an URL to an external website. Relative <link> href values are not supported.
<head>
<!-- Local: /public/styles/global.css -->
<link rel="stylesheet" href="/styles/global.css" />
<!-- External -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css"> />
</head>
Please note that because this approach uses the public/ directory, it skips the normal CSS processing, bundling and optimizations that are provided by Astro. If you need these transformations, use the import method.
If you are still facing issues, there might be a bug as mentioned in this GitHub issue (https://github.com/withastro/astro/issues/7761). The issue describes a problem where styles and scripts in components included inside mdx content, loaded through another component, don't work. If this is the case, you might want to follow the issue for updates or potential workarounds.
Sources:
- Astro Documentation - Styles & CSS (https://docs.astro.build/en/guides/styling/)
- Astro Documentation - Imports (https://docs.astro.build/en/guides/imports/)
- GitHub Issue (https://github.com/withastro/astro/issues/7761)