reactjs - 为什么我在第一次加载时在 nextjs 中什么也得不到(getInitialProps 中的 css 和参数)
问题描述
伙计们,我是 nextjs 的新手。
当我在页面文件夹中创建的页面中使用导入 css 文件时,第一次加载时不加载我必须重新加载它才能看到它,当我在 getInitialProps 中调用 api 时
next.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 }))
快乐编码!
推荐阅读
- sql - SSIS 包在从网络读取输入流时出现致命错误
- amazon-web-services - sagemaker 上的 AccessDeniedException:AWS SageMaker Studio 中的 CreateDomain,尽管有 SageMakerFullAccess
- python - 当我尝试使用我的 API 插入寄存器时出现错误 #1064 MySQL
- python-3.x - Decode Instaloader session file
- javascript - How do I alter vue component programmaticaly?
- c# - How to save the keycode of a pressed key?
- gradle - How to test init.gradle script?
- r - 将值向量输入幂函数
- npm - 每次在我的网络服务器上进行修改时避免 npm run build
- r - 如何合并两个数据框,并在公共字段匹配的情况下,将数据合并到一条记录中?