Astro Config

3 min read

Vite rollupOptions

Sets the filename ex: /dist/_astro/main.css

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: "static",
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: "_astro/main[extname]",
        },
      },
    },
  },
});

File + Extension Name Variables

[extname]: file extension that includes the .css.
[ext]: file extension css.
[hash]: random hash added to filename main-[hash].
[name]: name is based on filename, it comes up as about for me.

External CSS

I haven’t tried this yet, but it’s here to remind me.

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    inlineStylesheets: 'never'
  }
});

Redirects

Important for pagination.

Going from wordpress that only adds /page/2 when $paged!==1. Where Astro starts with /page, but not /page/1.

astro.config.mjs

export default defineConfig({
  redirects: {
    "/blog": "/blog/page",
    "/blog/page/1": "/blog/page"
    "/from-this": "/to-this"
  }
});

You can also redirect with a Redirection Layout.