Utilice el cargador de CSS Next.js integrado (consulteaquí ) en lugar del heredado @zeit/next-sass .

1. Reemplace el paquete @zeit/next-sass con sass .
2. Eliminar next.config.js . O no cambie la carga de CSS en él.
3. Mueva el CSS global como se sugiere en el mensaje de error.

Dado que Next.js 9.2, el CSS global debe importarse en el componente <App> personalizado.

 // pages/_app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }

Para agregar estilos solo a un componente o página específicos, puede usar el soporte integrado de módulos CSS. (ver aquí )

Por ejemplo, si tiene un componente Button.js , puede crear un archivo Sass button.module.scss e incluirlo en el componente.

Para mí, el problema fue porque había usado dos módulos. exportaciones en mi archivo next.config.js como este

 const withPlugins = require('next-compose-plugins') const sass = require('@zeit/next-sass') const css = require('@zeit/next-css') const nextConfig = { webpack: function(config){ config.module.rules.push({ test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 100000, name: '[name].[ext]' }} }) return config } } module.exports = withPlugins([ [css], [sass, { cssModules: true }] ], nextConfig) module.exports = { env: { MONGO_URI = 'your uri' } }

. 1 Lo modifiqué para cambiar el módulo de exportación así.

 const nextConfig = { webpack: function(config){ config.module.rules.push({ test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 100000, name: '[name].[ext]' }} }) return config }, env: { MONGO_URI: "your uri" } }

2 luego eliminé el segundo módulo.exportaciones

No necesitaba hacer nada dentro de next.config.js .

Supongamos que está utilizando un css global como Bootstrap, lo que significa que contiene css que debe aplicarse a toda su aplicación y a todas las diferentes páginas dentro de ella.

Los archivos css globales deben conectarse a NextJS de una manera muy particular.

Entonces, dentro del directorio pages/ necesitas crear _app.js .

Es fundamental que el archivo se llame _app.js .

Luego, en la parte superior de ese archivo, importaría Bootstrap css de la siguiente manera:

import 'bootstrap/dist/css/bootstrap.css';

Luego agregarías lo siguiente:

 export default ({ Component, pageProps }) => { return <Component {...pageProps} />; };

Entonces, ¿qué está pasando en ese código?

Bueno, detrás de escena, siempre que intente navegar a alguna página distinta con NextJS, NextJS importará su componente desde uno de los diferentes archivos dentro de su directorio pages/ .

NextJS no solo toma su componente y lo muestra en la pantalla.

En cambio, lo envuelve dentro de su propio componente predeterminado personalizado y se lo conoce dentro de NextJS como la aplicación.

Lo que está haciendo al definir _app.js es definir su propio componente de aplicación personalizado.

Entonces, cada vez que intente visitar una ruta dentro de un navegador o su ruta raíz, NextJS importará ese componente dado y lo pasará a AppComponent como el Component prop.

Entonces, el Component allí es igual a cualquier componente que tenga en el directorio pages/ . Y luego pageProps será el conjunto de componentes que tiene la intención de pasar a sus archivos dentro de pages/ .

Para resumir, esta cosa es como una envoltura delgada alrededor del componente que está tratando de mostrar en la pantalla.

¿Por qué tienes que definir esto en absoluto?

Bueno, si alguna vez desea incluir CSS global en el proyecto, Bootstrap es un CSS global, por ejemplo, solo puede importar CSS global en el archivo _app.js .

Resulta que si intenta visitar otros componentes u otras páginas, NextJS no carga ni analiza esos archivos.

Por lo tanto, cualquier css que haya importado allí no se incluirá en el archivo HTML final.

Entonces, tiene un css global que debe incluirse en cada página, debe importarse al archivo de la aplicación porque es el único archivo que se garantiza que se cargará cada vez que un usuario acceda a su aplicación.

No olvide que, además de importar el css dentro de _app.js , también debe ejecutar un arranque de npm install bootstrap en su terminal.

Puede leer más sobre esto aquí: https://nextjs.org/docs/messages/css-global

Puede reemplazar los cargadores CSS de NextJs obstinados (¿y demasiado complejos?) Con los suyos propios. Aquí hay uno simple para css global:

 const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { reactStrictMode: true, webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { // Find and remove NextJS css rules. const cssRulesIdx = config.module.rules.findIndex(r => r.oneOf) if (cssRulesIdx === -1) { throw new Error('Could not find NextJS CSS rule to overwrite.') } config.module.rules.splice(cssRulesIdx, 1) // Add a simpler rule for global css anywhere. config.plugins.push( new MiniCssExtractPlugin({ experimentalUseImportModule: true, filename: 'static/css/[contenthash].css', chunkFilename: 'static/css/[contenthash].css', }) ) config.module.rules.push({ test: /\.css$/i, use: !isServer ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'], }) return config }, }

Agregue esto a su _app.js

 import '../styles/globals.css'

Next.js deja de quejarse cuando su archivo tiene un module en el nombre, por ejemplo, cambiando import '../global-styles/main.scss'; para import '../global-styles/main.module.scss'; arreglaría la advertencia y podría tener sus estilos en global-styles , o por ejemplo, en su component .

No se requieren dependencias/configuraciones adicionales en next.config.js .

Intente incluir ".module" en su nombre de archivo scss.

Cambie main.scss a main.module.scss

Ejemplo:

 import styles from './todolist-profile-info.module.scss'