CODEWITHSUNDEEP
astrojs
LityS
LityS

Reputation: 3

Build one css file in astro framework

In Astro.js after the build I get 3 separate CSS files:

<link rel="stylesheet" href="./assets/asset.d445157f.css" />
<link rel="stylesheet" href="./assets/asset.71926ed3.css" />
<link rel="stylesheet" href="./assets/asset.e5ceecbe.css" />

But what I want is to get only one file, e.g.:

<link rel="stylesheet" href="./assets/style.css" />

Is there any way to achieve that in Astro?

For now, I am scaling these 3 files manually into 1 after the build.

Upvotes: 0

Views: 3073

Answers (2)

Sam Pisansarakit
Sam Pisansarakit

Reputation: 1

Not sure if this answer existed before, but there's a build.cssCodeSplit option that seems to work

vite: {
    build: {
      cssCodeSplit: false,
      rollupOptions: {
        output: {
          entryFileNames: 'scripts/[name].js',
          chunkFileNames: 'chunks/[name].js',
          assetFileNames: 'assets/[name][extname]'
        }
      }
    }
  }

Edit: This isn't working - a bunch of the css goes missing :-(

Upvotes: 0

rcbxd
rcbxd

Reputation: 122

Here is how I solved it using Rollup config:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  output: 'static',
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: 'assets/[name][extname]',
        }
      }
    }
  }
});

Upvotes: 3

Related Questions