Next.js 刷新页面中断 css classNames
Posted
技术标签:
【中文标题】Next.js 刷新页面中断 css classNames【英文标题】：Next.js refreshing page breaks css classNames 【发布时间】：2021-05-02 14:24:21 【问题描述】：我正在迁移一个 React SPA，而且我对 Next.js 还是很陌生。我的问题是，当我加载主页时，它加载正常，但是当我刷新页面时，它会将错误的类名分配给错误的组件。现在只发生在我的侧边栏组件上。
这是我的侧边栏组件代码
import React, useContext from "react";
import AuthContext from "../../../contexts/AuthContext";
import Avatar from "../Avatar";
import ArrowIcon from "../../../assets/icons/arrow.svg";
import HomeIcon from "../../../assets/icons/home-run.svg";
import ChatIcon from "../../../assets/icons/comment.svg";
import RocketIcon from "../../../assets/icons/start-button.svg";
import SchoolIcon from "../../../assets/icons/school.svg";
import QuestionIcon from "../../../assets/icons/question.svg";
import LoveIcon from "../../../assets/icons/love.svg";
import WorkIcon from "../../../assets/icons/work.svg";
import SettingsIcon from "../../../assets/icons/settings.svg";
import SearchBar from "../SearchBar";
import useRouter from 'next/router'
import styles from "./index.module.css";
function SideBar( setMenuOpen, className, ...props )
const router = useRouter()
const currentUser = useContext(AuthContext);
const goTo = (link) =>
router.push(link);
if (setMenuOpen)
setMenuOpen(false);
;
const avatar = styles['avatar']
console.log(styles['avatar']);
console.log(avatar);
return (
<div className=className>
<ArrowIcon className=styles["close-button"]
onClick=() =>
setMenuOpen(false);
/>
currentUser && (
<>
<Avatar
className="SideBar_avatar__u-NXU"
image=
currentUser.get("profilePicture") &&
currentUser.get("profilePicture").url()
/>
<span className=styles.username>
@currentUser.attributes.username
</span>
</>
)
console.log(styles.searchbar)
<SearchBar className=styles['searchbar'] />
<ul className=styles.menu>
<li
onClick=() =>
goTo("/home");
>
<HomeIcon className=styles["menu-icon"]/>
/* <img src=homeIcon /> */
<span>Feed</span>
</li>
<li>
<RocketIcon className=styles["menu-icon"]/>
/* <img className=styles["menu-icon"] src=rocketIcon /> */
<span>Descubre</span>
</li>
<li>
<ChatIcon className=styles["menu-icon"]/>
/* <img className=styles["menu-icon"] src=chatIcon /> */
<span>Chat Global</span>
</li>
<li
onClick=() =>
goTo("/schools");
>
<SchoolIcon className=styles["menu-icon"]/>
/* <img className=styles["menu-icon"] src=schoolIcon /> */
<span>Escuelas</span>
</li>
<li
onClick=() =>
goTo("/question/");
>
<QuestionIcon className=styles["menu-icon"]/>
/* <img
className=styles["menu-icon"]
src=questionIcon
/> */
<span>Pregunta</span>
</li>
<li
onClick=() =>
goTo("/unicrush/");
>
<LoveIcon className=styles["menu-icon"]/>
/* <img className=styles["menu-icon"] src=loveIcon /> */
<span>UniCrush</span>
</li>
<li
onClick=() =>
goTo("/job/");
>
<WorkIcon className=styles["menu-icon"]/>
/* <img className=styles["menu-icon"] src=workIcon /> */
<span>Trabajos</span>
</li>
</ul>
<div className=styles.footer>
<div
className=styles["settingsOption"]
onClick=() =>
goTo("/settings");
>
<SettingsIcon className=styles["menu-icon"]/>
/* <img
className=styles["menu-icon"]
src=settingsIcon
/> */
<span>Adjustes</span>
</div>
<span>Contactanos!</span>
</div>
</div>
);
SideBar.defaultProps =
className: styles.container,
;
export default SideBar;
您可以看到我在控制台记录了类名，当我记录它们时它们是正确的，但在我刷新时它们会改变。
这是我的侧边栏首次加载时的外观 enter image description here enter image description here
这是刷新后的样子 enter image description here enter image description here
这是侧边栏的 CSS，我正在使用 CSS 模块。
.container
display: flex;
flex-direction: column;
background: #fff;
position: absolute;
height: 100vh;
top: 0;
width: 200px;
box-shadow: 2px 0 5px 1px #a9a6a64d;
.close-button
display: none;
.avatar
margin: auto;
margin-top: 10px;
.username
text-align: center;
font-size: large;
color: #5d5d5d;
.menu
list-style: none;
display: flex;
flex-grow: 1;
flex-direction: column;
.menu-icon
width: 20px;
height: 20px;
.menu li
display: flex;
padding: 10px 15px;
.menu li span
margin-left: 10px;
font-size: 20px;
.searchbar
display: none;
.footer
margin: 10px 0px;
display: flex;
width: 100%;
justify-content: space-around;
.settingsOption
display: flex;
.settingsOption span
margin-left: 3px;
/* Device = Most of the Smartphones Mobiles (Portrait) and Low Resolution tablets
Screen = B/w 320px to 767px
*/
@media (max-width: 768px)
.container
width: 100%;
overflow: scroll;
align-items: center;
z-index: 2;
position: fixed;
.searchbar
display: flex;
margin: 15px 0px;
.close-button
align-self: end;
display: flex;
width: 25px;
margin: 10px;
.menu
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
【问题讨论】：
图片不可见。 我想你可以点击链接 【参考方案1】：这里有 2 种可能性，
-
装载机
尝试在 next.config.js 中添加 css 加载器，如下所示
const withImages = require('next-images')
module.exports = withImages(
target: 'serverless',
webpack: function (config, webpack )
config.module.rules.push(
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
)
config.plugins.push(new webpack.DefinePlugin(
'process.env':
ENV: JSON.stringify(process.env.ENV),
))
return config
,
)
-
使用 (_document.js) 检查样式化组件。 https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68
【讨论】：
我收到错误“withImage is not defined”抱歉，我对 next.js 很陌生。那是我必须安装的模块吗？ 保留 withImages 特定于我的代码...仅使用与加载程序相关的行...加载程序：['style-loader', 'css-loader', 'less-loader'] 我收到此错误“错误 - 未找到入口模块：错误：无法解析 'less-loader”，感谢您的帮助。 ` module.exports = webpack: function (config, webpack ) config.module.rules.push( loaders: ['style-loader', 'css-loader', ' less-loader'] // css 加载器 ) config.module.rules.push( test: /\.svg$/, use: ["@svgr/webpack"] );返回配置 , ` "devDependencies": "css-loader": "^5.0.1", "less-loader": "^7.1.0", "style-loader": "^2.0.0 " 在 package.json 中添加这些依赖项部分并安装这些以上是关于Next.js 刷新页面中断 css classNames的主要内容，如果未能解决你的问题，请参考以下文章
Next.js : 修改文件后刷新页面，无需重新运行 'npm run'
在 Next JS 中，Material UI makeStyles 在刷新时撤消自定义 css