css - NextJS 生产 CSS 构建

Question

我有针对不同布局的自定义 CSS 文件，在开发模式下没有问题，但是当我在生产模式下发布我的应用程序时，Nextjs 结合了所有 CSS 并给我的布局带来了问题。

Answer 1

通常，在构建之后，我们将所有CSS 和JS chunks 放入static 文件夹，以便当服务器请求请求的页面时 Next Js 从 static 文件夹(取决于请求)提供它。

服务器.js:

const staticDir = path.resolve(__dirname, "..", ".next/static");
server.use(compression());
server.use("/_next/static", express.static(staticDir));



    server.get("/_next/*", (req, res) => {
      /* serving _next static content using next.js handler */
      handle(req, res);
    });
    server.get("/static/*", (req, res) => {
      /* serving _next static content using next.js handler */
      handle(req, res);
    });

在您的 _document.js 文件中添加以下行，并请分享您在 next.config.js 中添加的配置。

_document.js

//渲染应用程序和页面并获取具有收集的副作用的页面上下文。

  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement()
    ]
  };
};