我正在尝试通过将.scss
中的_app.js
文件导入Nextjs应用程序来应用全局样式。
但是问题是,页面加载时没有预先应用样式。因此,所有初始页面呈现都会发生哪种FOUC。
以下是上述问题的基本版本:
项目结构:
pages/
_app.js
index.js
app.scss
package.json
index.js 文件:
export default function Home() {
return (
<div className="hello">
<p>Hello World</p>
</div>
);
}
_app.js 文件:
import "../app.scss";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
app.scss 文件:
$color: red;
.hello {
background-color: lavender;
padding: 100px;
text-align: center;
transition: 100ms ease-in background;
&:hover {
color: $color;
}
}
package.json 文件:
{
"name": "basic-css",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^9.4.5-canary.31", // using canary build as per https://github.com/vercel/next.js/issues/11195
"node-sass": "4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"license": "ISC"
}
按照@Ramakay的answer的第3点
它将创建一个静态的散列css文件,并将其附加到<head/>
标记中,但问题仍然存在。
我期望什么:
我现在要得到什么:
我没有使用任何外部库,例如“样式组件”等。我也没有在寻找它。
该如何解决当前问题?
答案 0 :(得分:0)
由于这是JS中的CSS方法,因此文件未在服务器端呈现,无法应用文档预解析器,因此必须等待Javascript下载