Solo vengo del fondo de reacción y mi intención es que quiero usar el archivo SCSS a nivel de componente como lo estaba usando en mi aplicación de reacción. No me gusta el cambio al siguiente que da un error vulgar:
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).Ese error aparecerá cuando nombre su archivo SCSS como styles.scss , Next.js entenderá que está definiendo estilos globales pero está tratando de importarlos a sus componentes. Por ejemplo
//component.jsx import * as S from '../styles.scss' //throw an error in the terminal De acuerdo con este documento , debe seguir su convención de nomenclatura para su archivo de estilos como styles.module.scss . Next.js comprenderá que, en su lugar, está importando el archivo de estilo de un módulo.
//component.jsx import * as S from '../styles.module.scss' //it's good now!La intención de esta convención de nomenclatura es que Next.js quiera obtener sus recursos respectivamente en lugar de obtener todos los recursos inicialmente, por lo que ponen esta regla particular para los archivos de estilo.