[英]why i dont get nothing in nextjs in first load (css and params in getInitialProps)
伙计们,我是 nextjs 的新手。
当我在页面文件夹中创建的页面中使用导入 css 文件时,在第一次加载时没有加载我必须加载它才能看到它,当我在 getInitialProps 中调用 api 时
下一个.config.js
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
// const withImages = require('next-images');
// module.exports = withImages()
module.exports = withSass({
...withCSS({
cssModules: false,
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
})
return config
}
}),
cssModules: true,
})
// _document.js
import Document, { Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
<link rel="stylesheet" href="/public/css/fontAwsome/all.min.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"
/>
</Head>
<body dir="rtl" className="text-right">
<Main />
<NextScript />
</body>
</html>
);
}
}
您正在合并对象与函数next.config.js它在回调中解析回调,一个更简单的例子是
const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(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;
}
}));
withCSS(withSass({ // Config }))
快乐编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.