我刚刚来自 React 背景，我的意图是我想在组件级别使用 SCSS 文件，就像我在 React 应用程序中使用的那样，我不喜欢接下来的更改给出一些粗俗的错误:
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
最佳答案
当您将 SCSS 文件命名为 styles.scss 时，就会出现该错误，Next.js 会理解您正在定义全局样式，但您正在尝试将它们导入到组件中。例如
//component.jsx
import * as S from '../styles.scss' //throw an error in the terminal
根据this document ，您必须遵循样式文件的命名约定，例如 styles.module.scss。 Next.js 会理解您正在导入模块的样式文件。
//component.jsx
import * as S from '../styles.module.scss' //it's good now!
这种命名约定的目的是 Next.js 想要分别获取您的资源，而不是一开始就获取所有资源，因此他们为样式文件设置了这一特定规则。
关于javascript - 如何在next js中使用组件级sass文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72154461/