NextJS 在生产构建中错误的 CSS 顺序
Posted
技术标签:
【中文标题】NextJS 在生产构建中错误的 CSS 顺序【英文标题】：NextJS wrong CSS order on production build 【发布时间】：2021-01-13 05:02:36 【问题描述】：我从本地文件和节点模块导入 CSS 文件：
//> Global Styling
// Local
import "../styles/globals.scss";
// Icons
import "@fortawesome/fontawesome-free/css/all.min.css";
// Bootstrap
import "bootstrap-css-only/css/bootstrap.min.css";
// Material Design for Bootstrap
import "mdbreact/dist/css/mdb.css";
这在我的本地开发版本上按预期工作。所有样式均按应有的方式显示。
正如您在此处看到的，本地和生产中的样式不同。 （看看字体和按钮）
（开发左，生产右）
我的next.config.js 是：
//#region > Imports
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");
//#endregion
//#region > Exports
module.exports = [
withSass(
webpack(config, options)
config.module.rules.push(
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use:
loader: "url-loader",
options:
limit: 100000,
,
,
);
return config;
,
),
withPlugins([withCSS, withFonts, withImages]),
];
//#endregion
/**
* SPDX-License-Identifier: (EUPL-1.2)
* Copyright © 2020 InspireMedia GmbH
*/
在构建应用程序时，引导程序似乎覆盖了 MDB 样式。我使用next build && next export && firebase deploy 部署我的应用程序，并使用./out 文件夹作为部署源。
您可以在这里找到代码：https://github.com/aichner/nextjs-redux-template
【问题讨论】：
看来你不是唯一拥有这个issue的人。简而言之，代码拆分正在破坏生产中的导入顺序。我建议在问题中发布您的回购。 有什么解决办法吗？？我也面临同样的问题 【参考方案1】：如果问题是样式不正确。 （因为您使用的是 material-ui）：
-
在pages目录下创建_document.js。
用以下代码填写文件：
import React from "react";
import Document, html, Head, Main, NextScript from "next/document";
import ServerStyleSheets from "@material-ui/styles"; // works with @material-ui/core/styles, if you prefer to use it.
import theme from "../Theme"; // change this theme path as per your project
export default class MyDocument extends Document
render()
return (
<Html lang="en">
<Head>
/* Not exactly required, but this is the PWA primary color */
<meta name="theme-color" content=theme.palette.primary.main />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) =>
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
// Render app and page and get the context of the page with collected side effects.
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(),
],
;
;
原因： Material UI 在幕后使用上下文来应用其样式。由于 NextJs 服务端渲染，这个上下文将会丢失。所以，我们需要告诉 Next 使用之前的上下文。上面的代码就是这样做的。
【讨论】：
以上是关于NextJS 在生产构建中错误的 CSS 顺序的主要内容，如果未能解决你的问题，请参考以下文章
Nextjs 无法在生产 node_env 的“.next”目录中找到有效的构建