如何在下一个js中使用组件级别sass文件
How to use component level sass file in next js
我只是来自 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).
下一位js大神可以指导一下
当您将 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 想要分别获取您的资源，而不是最初获取所有资源，因此他们为样式文件设置了此特定规则。
我只是来自 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).
下一位js大神可以指导一下
当您将 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 想要分别获取您的资源，而不是最初获取所有资源，因此他们为样式文件设置了此特定规则。