开发中在SSR页面的<style>标签中生成

Question

我真的很难找到如何制作包含其项目的所有样式的单个 html 页面的最佳方法。 如何从CSS模块获取样式？或者也许这是个坏主意？

template = await fs.readFile('./index.html', 'utf-8')
template = await vite.transformIndexHtml(url, template)
render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render
// how to get css here?
const rendered = await render(url, ssrManifest)

const html = template
  .replace(`<!--app-head-->`, rendered.head ?? '')
 .replace(`<!--app-html-->`, rendered.html ?? '')

Answer 1

有两种方法可以做到这一点，一种是使用 vite-plugin-ssr 来收集 css，方法是：

npm i vite-plugin-ssr

安装后，您需要在 vite 配置中进行一些配置更改，如下所示：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      scopeBehaviour: 'local',
    },
  },
  ssr: {
    noExternal: ['@vitejs/plugin-react'],
  },
})

然后对代码进行一些更改，例如收集服务器端渲染期间使用的css并将其注入到HTML

中

import { renderPage } from 'vite-plugin-ssr'

const template = await fs.readFile('./index.html', 'utf-8')
const { htmlRender, css } = await renderPage({ url })

const html = template
  .replace(`<!--app-head-->`, `<style>${css}</style>`)
  .replace(`<!--app-html-->`, htmlRender)