如何在react-static中为每个页面生成单独的css文件

Question

我有一个应用程序是用react-static构建的。我注意到所有页面(路由)的CSS都合并到一个大的styles.css文件中。是否可以为每个页面生成单独的CSS文件？

现在，如果我运行build命令，dist文件夹中有一个css文件，两个页面都有css文件，我想分别得到MainPage和AboutPage的css文件。

下面是我的static.config.js文件的外观：

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

下面是完整的代码：https://github.com/annmirosh/react-static-test

感谢您的帮助！

Answer 1

经过一些研究，我发现它是在react-static文档中描述的。有一个可添加到static.config.js的选项extractCssChunks

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

它做的正是我需要的--它支持CSS按路由自动拆分成单独的文件