NextJS 在生产构建中错误的 CSS 顺序 [英] NextJS wrong CSS order on production build
问题描述
我从本地文件和节点模块导入 CSS 文件:
I import CSS files from local files and node modules:
//> 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";
这在我的本地开发版本上按预期工作.所有样式均按应有的方式显示.
This works as intended on my local development version. All styles appear as they should be.
正如您在此处看到的，本地和生产的样式不同.(看看字体和按钮)
As you can see here, the styling is different on local and production. (Take a look at font and buttons)
(开发左，生产右)
我的 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 && 部署我的应用程序下一个出口&&firebase deploy 并使用 ./out 文件夹作为部署源.
It seems the MDB styling is being overwritten by bootstrap on building the app. I deploy my app by using next build && next export && firebase deploy and use the ./out folder for deployment source.
你可以在这里找到代码:https://github.com/aichner/nextjs-redux-template
You can find the code here: https://github.com/aichner/nextjs-redux-template
推荐答案
如果问题是样式不正确.(因为您使用的是 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 使用之前的上下文.上面的代码就是这样做的.
Reason : Material UI uses context behind the scenes to apply its styling. Due to NextJs server side rendering, this context will be lost. So, we need to tell Next to make use of that previous context. The above code does that.
这篇关于NextJS 在生产构建中错误的 CSS 顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
