#Stylesheet not being imported into Starlight

1 messages · Page 1 of 1 (latest)

foggy topaz
#

With the following astro.config.mjs file, the style sheet doesn't seem to be imported. Can you help?

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import remarkMath from 'remark-math';
import rehypeKaTeX from 'rehype-katex';

// https://astro.build/config
export default defineConfig({
    markdown: {
        remarkPlugins: [ remarkMath ], 
        rehypePlugins: [ rehypeKaTeX ], 
    },
    integrations: [
        starlight({
            head: [ 
                {
                tag: 'link',
                attrs: {
                    rel: 'stylesheet',
                    href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css'
                },
                },
            ],
            title: 'My Docs',
            sidebar: [
                {
                    label: 'Guides',
                    items: [
                        { label: 'Example Guide', link: '/guides/example/' },
                    ],
                },
            ],
        }),
    ],
});
ashen joltBOT
#

Hi @foggy topaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To import a custom CSS file into your Starlight site, you need to follow these steps:

  1. Add a CSS file to your src/ directory. For example, you could create a file at src/styles/custom.css.

  2. Add the path to your CSS file to Starlight’s customCss array in astro.config.mjs.

Here's an example of how to do this:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import remarkMath from 'remark-math';
import rehypeKaTeX from 'rehype-katex';

export default defineConfig({
    markdown: {
        remarkPlugins: [ remarkMath ], 
        rehypePlugins: [ rehypeKaTeX ], 
    },
    integrations: [
        starlight({
            head: [ 
                {
                tag: 'link',
                attrs: {
                    rel: 'stylesheet',
                    href: '<https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css'>
                },
                },
            ],
            title: 'My Docs',
            sidebar: [
                {
                    label: 'Guides',
                    items: [
                        { label: 'Example Guide', link: '/guides/example/' },
                    ],
                },
            ],
            customCss: [
                // Relative path to your custom CSS file
                './src/styles/custom.css',
            ],
        }),
    ],
});

This will import the custom.css file from your src/styles/ directory and apply the styles to your Starlight site. You can add as many CSS files as you want to the customCss array.

For more information, refer to the Starlight customization guide (https://starlight.astro.build/guides/customization/#_top).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: