How to use component level sass file in next js

Question

我刚刚来自反应背景，我的意图是我想在组件级别使用 SCSS 文件，就像我在我的反应应用程序中使用的那样，我不喜欢接下来的更改会给出一些粗俗的错误：

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).

Answer 1

That error will come out when you name your SCSS file like styles.scss , Next.js will understand that you are defining global styles but you're trying to import them into your components. For example

//component.jsx
import * as S from '../styles.scss' //throw an error in the terminal

According to this document , you have to follow their naming convention for your styles file like styles.module.scss . Next.js will understand that you're importing a module's style file instead.

//component.jsx
import * as S from '../styles.module.scss' //it's good now!

The intention for this naming convention is that Next.js wants to fetch your resources respectively instead of fetching all resources initially, so they put this particular rule for style files.