Next.js 页面的第一次绘制缺少所有样式

Question

我正在使用 scss 来设置我的 next.js 应用程序的样式，但是我注意到当我通过 google chrome 中的网络选项卡预览第一次绘制时，所有样式都丢失了。

如您所见，该页面相当简单，并且不获取任何初始道具。我怀疑服务器由于某种原因没有在后端构建整个页面（包括样式）。

我的 next.config.js 设置是： const withStyles = require("@webdeb/next-styles");

  module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
  });

Answer 1

对于较新的 nextjs 版本，我认为您不再需要使用 withStyles 和类似的插件。

仅全局样式

你可以：

• 安装sass
• 安装您正在使用的任何 css 框架，并按照他们的说明将他们的 css / scss 文件包含在您的项目中
• 如果它是一个简单的项目并且您在配置文件中的所有内容都是 css 配置内容，则可能会完全删除您的 next.config.js 文件。
• 将你的scss文件直接导入你的js文件（例如import '../styles/app.scss'）

作用域 scss 样式

• 似乎您可以保留next.config.js 文件，基于我通过谷歌搜索找到here 的这个解决方法：

const withStyles = require('@webdeb/next-styles')

module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, // style.(m|module).css & style.(m|module).scss for module files
})