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

问题描述

我有一个使用 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

感谢您的帮助！

解决方法

经过一些研究，我发现它在 react-static Docs 中有描述。有一个选项 extractCssChunks 可以添加到 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'),],}

它完全满足了我的需求 - 它可以通过路由自动将 CSS 拆分为单独的文件