How to generate separate css files for each page in react-static

Question

I have an app that is built with react-static. I noticed that CSS for all pages (routes) are merged into one big styles.css file. Is it possible to generate separate CSS files for each page?

Now if I run build command there is one css file in the dist folder with css for both pages, I want to get separate css files for MainPage and AboutPage.

This is how my static.config.js file look like:

export default {
  getRoutes: async () => {
    return [
      {
        path: '/',
        template: 'src/pages/MainPage/MainPage.js',
      },
      {
        path: 'about',
        template: 'src/pages/AboutPage/AboutPage.js',
      },
    ]
  },
  plugins: [
    require.resolve('react-static-plugin-sass'),
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
  ],
}

And here is the full code: https://github.com/annmirosh/react-static-test

Appreciate your help!

Can you please further explain what "generate" means in your question? — Joseph Attia, Apr 23 '21 at 18:00
@JosephAttia, "generate" means "create". When I run the 'build' command, there is one css file that is created in the dist folder. I'm interested in if it is possible to set up the react-static the way it creates 2 CSS files - for the Main page and for the About page — Anna Miroshnichenko, Apr 23 '21 at 18:19

score 1 · Answer 1 · answered Apr 23 '21 at 20:17

After some research, I figured out that it's described in the react-static Docs. There is an option extractCssChunks that can be added to the static.config.js:

export default {
  extractCssChunks: true,
  getRoutes: async () => {
    return [
      {
        path: '/',
        template: 'src/pages/MainPage/MainPage.js',
      },
      {
        path: 'about',
        template: 'src/pages/AboutPage/AboutPage.js',
      },
    ]
  },
  plugins: [
    require.resolve('react-static-plugin-sass'),
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
  ],
}

and it did exactly what I need - it enables automatic CSS splitting into separate files by routes

How to generate separate css files for each page in react-static

1 Answers1