Hola, tenemos la respuesta a lo que estabas buscando, deslízate y la encontrarás aquí.
Solución:
EDITAR: a partir de Next.js 7, todo lo que tiene que hacer para admitir la importación de archivos .css es registrar el complemento withCSS en su next.config.js. Comience instalando el complemento:
npm install --save @zeit/next-css
Luego crea el next.config.js archivo en la raíz de su proyecto y agregue lo siguiente:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS(/* my next config */)
Puede probar que esto funciona creando una página simple e importando algo de CSS. Comience creando un archivo CSS:
// ./index.css
div
color: tomato;
Luego crea el pages carpeta con un index.js expediente. Entonces puedes hacer cosas como esta en tus componentes:
// ./pages/index.js
import "../index.css"
export default () => Welcome to next.js 7!
También puede usar módulos CSS con unas pocas líneas de configuración. Para obtener más información sobre esto, consulte la documentación en nextjs.org/docs/#css.
Siguiente.js < versión 7
Next.js no viene con importaciones de CSS de forma predeterminada. Tendrás que usar un cargador de paquetes web. Puede leer sobre cómo funciona esto aquí: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.
Next.js también tiene complementos para CSS, SASS y SCSS. Aquí está el complemento para CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. La documentación para ese complemento lo hace bastante simple:
- tu creas el
_documentpresentar enpages/. - tu creas el
next.config.jsarchivo en la raíz.
El uso de fragmentos de código de la documentación debería configurarlo para importar archivos CSS.
Necesitará al menos la versión 5.0. Puede asegurarse de tener instalado el último Next.js: npm i [email protected].
Si sigue recibiendo el error:
Unexpected token (6:3) You may need an appropriate loader to handle this file type.
intente esto en su next.config.js:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
cssLoaderOptions:
url: false
)
- Ahora debería poder importar hojas de estilo de node_modules de esta manera:
import 'bootstrap-css-only/css/bootstrap.min.css';
Nota: Uso de Next v 8+
Fondo:
Pasé algunas horas tratando de simplemente importar un CSS instalado como node_module y las diversas soluciones son en su mayoría soluciones alternativas, pero como se muestra arriba, hay una solución simple.
Fue proporcionado por uno de los miembros del equipo central.
Acuérdate de que tienes la opción de añadir una valoración verdadera si te ayudó.