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

Posted 2023-03-06

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

【英文标题】：How to generate separate css files for each page in react-static

【发布时间】：2021-07-17 22:48:12

【问题描述】：

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

感谢您的帮助！

【问题讨论】：

您能否进一步解释一下您的问题中的“生成”是什么意思？

@JosephAttia，“生成”的意思是“创造”。当我运行“build”命令时，在 dist 文件夹中创建了一个 css 文件。我感兴趣的是是否可以通过创建 2 个 CSS 文件的方式设置 react-static - 用于主页和关于页面

【参考方案1】：

经过一番研究，我发现它在 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 拆分为单独的文件