Build one css file in astro framework

Question

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.

Are the CSS files being created in separate components? Or are they being included in the same `.astro` file? — stevenw00, Aug 22 '22 at 02:37
I have a lot of components with different styles inside and after the build, in the `dist` folder is creating `assets` folder. Inside of him, I have `CSS` files. What I want is only one `CSS` file included in the generated `HTML` template and that only one `CSS` file instead of e.g. 10. — LityS, Aug 31 '22 at 13:07

score 0 · Accepted Answer · answered Sep 02 '22 at 15:55

0

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]',
        }
      }
    }
  }
});

answered Sep 02 '22 at 15:55

rcbxd

92
3

Amazing! I didn't find it in the docs. That actually works but not like I want to. I still have multiple folders `(styles1.css, styles2.css, styles3.css ...)` but now it's easier for me to find witch style is for what page. Thanks! – LityS Sep 09 '22 at 14:42

Sam Pisansarakit · Answer 2 · 2023-05-02T15:24:41.483

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 :-(

Build one css file in astro framework

2 Answers2