1

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

感谢你的帮助！

4

1 回答 1

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 拆分为单独的文件

于 2021-04-23T20:17:01.083 回答