Next.js: ¿Incluir css en un próximo proyecto?

Creado en 27 nov. 2016 · 31Comentarios · Fuente: vercel/next.js

Sé que Next usa Glamour y css-in-js. Pero, ¿hay alguna forma de usar css/less/scss real en un proyecto Next... de alguna manera? ¿Al menos para arrancar un proyecto?

Mi razonamiento es el siguiente: para sitios simples, como los que está dirigido a Next, la mayoría de los temas html prefabricados que se pueden comprar en línea se crean usando html y css puros. Entonces, todo lo que necesita hacer es cortar el HTML en componentes de reacción, colocarlos en las carpetas de página apropiadas y listo.

Realmente me encantaría usar Next para mi proyecto, pero si no puedo aprovechar de alguna manera el css ya hecho, sería un factor decisivo para mí. ¿Hay una solución o una alternativa para este caso de uso?

Fuente

manolkalinov

Comentario más útil

Cree una carpeta /static al mismo nivel que la carpeta /pages .
En esa carpeta pon tus archivos .css
En los componentes de su página, importe Head y agregue <link /> a su CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Y eso es todo, de esta manera Next.js debería mostrar la etiqueta de enlace en el encabezado de la página y el navegador descargará el CSS y lo aplicará.

sergiodxa en 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Todos 31 comentarios

Cree una carpeta /static al mismo nivel que la carpeta /pages .
En esa carpeta pon tus archivos .css
En los componentes de su página, importe Head y agregue <link /> a su CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Y eso es todo, de esta manera Next.js debería mostrar la etiqueta de enlace en el encabezado de la página y el navegador descargará el CSS y lo aplicará.

sergiodxa en 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Wow, gracias por la rápida respuesta :). ¡Funciona! Solo hay un inconveniente: cuando se carga la página por primera vez, hay un destello del html sin estilo justo antes de que todo se represente correctamente. No estoy seguro si es de archivos css o js cargados después de reaccionar. ¿Habría una solución para esto?

De todos modos, estoy absolutamente impresionado con el trabajo que están haciendo y gracias nuevamente por la rápida respuesta.

manolkalinov en 28 nov. 2016

No importa, también importé el componente de encabezado con los enlaces css y js en la página de índice, y el flash desapareció. Además, al cambiar las etiquetas de anclaje a componentes de enlace, se eliminan los saltos sobrantes. La desventaja es que el componente Link parece eliminar las etiquetas html de sus elementos secundarios (como las etiquetas span con clases de iconos), de modo que solo queda texto.

Sé que este caso de uso es lo contrario de correcto y optimizado, pero es realmente útil para los casos en los que tenemos que recurrir a lo rápido y sucio... fealdad :)

Entonces, el flujo de trabajo para integrar un tema html prefabricado es este:

cree una carpeta estática y copie/mueva todos los archivos js/css/img de la plantilla
crear un archivo page.js con un componente
Agregue el html al componente y modifíquelo para cumplir con reaccionar
3.1. agregue la etiqueta Head y en ella incluya todos los archivos css/js del html original
3.2. actualice la ruta a esos archivos para que coincida con la nueva carpeta estática
3.3. Copie/pegue el html debajo de la etiqueta principal
3.4 Cierre o autocierre cualquier etiqueta html no cerrada (incluidas las etiquetas de enlace, entrada e img)
3.5. Buscar/Reemplazar todas las instancias de class=" con className="
3.6. Eliminar todos los comentarios html

manolkalinov en 28 nov. 2016

👍9 🎉3 😄3

@manolkalinov , ¿puede agregar su código para una fácil referencia? Sé que escribió el flujo de trabajo, pero un código de muestra hace que sea más fácil de seguir y depurar si ocurre un problema.

ralphievolt en 29 nov. 2016

👍1

Agregar CSS en la etiqueta principal funciona con seguridad. Sin embargo, es un poco complicado y ¿qué pasa si queremos usar algo como postcss o sass ? ¿Cómo convertir los estilos css existentes en un objeto JSON de glamour? También es muy difícil para los diseñadores diseñar la página usando glamor . Debe haber una mejor manera de hacerlo.
Por cierto, en comparación con los módulos CSS, ¿cuál es el beneficio de usar glamor ?

dzcpy en 30 nov. 2016

👍6

@andyhu , lea https://github.com/zeit/next.js#faq sobre el beneficio de usar glamor .
Aproximadamente postcss o sass , personalizar la configuración del paquete web le permitiría usarlos (https://github.com/zeit/next.js/pull/222), o creo que puede simplemente compila estos archivos en css antes de ejecutar next .

nkzawa en 1 dic. 2016

creo que esta solucionado Siéntase libre de reabrir si todavía tiene el problema. Gracias por tu respuesta @sergiodxa !

nkzawa en 1 dic. 2016

@nkzawa Uso la personalización de la configuración del paquete web, por lo que puedo usar menos en mi proyecto. Aquí está mi código
siguiente.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

entonces necesito el archivo less import './index.less' , pero ocurre un error

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

Estoy seguro de que he instalado less , less-loader , css-loader , style-loader , me puede dar alguna sugerencia, gracias de antemano.

kimown en 5 ene. 2017

Deberías intentarlo

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })

bkniffler en 9 ene. 2017

@kimown ¿Lograste importar el archivo less? Si es así, ¿te importaría compartir cómo lo hiciste?

crodriguezvega en 25 jun. 2017

@sergiodxa ¿Cómo puedo importar css desde node_modules?

saadbinsaeed en 19 jul. 2017

👍17

Yo mismo tuve esta pregunta sobre la importación de CSS desde un paquete npm.

Por ejemplo, rc-deslizador

import 'rc-slider/assets/index.css'

notrab en 19 jul. 2017

👍12

¿Había una respuesta a esto? @notrab

paulwehner en 26 ago. 2017

@notrab
Prueba esto

En su componente raíz o _document

import stylesheet from 'rc-slider/assets/index.css';

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>

saadbinsaeed en 28 ago. 2017

😕3 👍1

@saadbinsaeed Intenté esto. Funciona para componentes y páginas propias. Pero quiero empaquetarlo con el paquete web, en lugar de tenerlo en línea.

schoenwaldnils en 15 sept. 2017

👍1

@schoenwaldnils Intenté hacerlo pero no pude. Según tengo entendido, estamos usando una aplicación del lado del servidor, por lo que no podemos agrupar los archivos css por separado y enviarlos al cliente porque el servidor no sabe qué es css. tenemos que incrustar el css en nuestro html. Para acceder a él en toda su aplicación, insértelo en el componente raíz o vincúlelo en el encabezado como se muestra arriba por @sergiodxa.

saadbinsaeed en 15 sept. 2017

He probado el enfoque de @sergiodxa , pero no me funciona. ¿Sigue siendo aplicable con las últimas versiones de Next?

nickwild-999 en 14 oct. 2017

@sergiodxa gracias. Justo estaba buscando.

fredybustos en 30 nov. 2017

@sergiodxa Deberías cambiar tus respuestas. ¡No es estática ! debe ser estático

ayberkanilatsiz en 6 dic. 2017

👍2

Usar las importaciones de CSS es simple ahora usando https://github.com/zeit/next-plugins

Perdón por el problema de 1 año. Aparentemente, la gente termina aquí a través de Google.

timneutkens en 22 ago. 2018

👍1

Usar las importaciones de CSS es simple ahora usando https://github.com/zeit/next-plugins
Perdón por el problema de 1 año. Aparentemente, la gente termina aquí a través de Google.

Realmente no. Parece que no puedo encontrar una manera fácil de importar css directamente desde node_module. ¿Es esto por diseño?

cyberdude en 14 sept. 2018

👍6

Usar las importaciones de CSS es simple ahora usando https://github.com/zeit/next-plugins
Perdón por el problema de 1 año. Aparentemente, la gente termina aquí a través de Google.
Realmente no. Parece que no puedo encontrar una manera fácil de importar css directamente desde node_module. ¿Es esto por diseño?

Realmente no después de la próxima versión 7, ¿ya le echaste un vistazo? es aún más fácil que antes ;)

mtrabelsi en 30 sept. 2018

@mtrabelsi , ¿podría dar algún ejemplo de cómo importa css directamente desde el módulo de nodo en Next.js 7 porque estoy atascado con eso? Necesito importar algunos estilos del módulo de nodo pero no puedo encontrar una solución que funcione.

bogdan100 en 13 nov. 2018

Solucionamos este problema usando copy-webpack-plugin.
En la configuración del paquete web (next.config.js):

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater en 13 dic. 2018

puede verificar una solución para la corrección css del lado del cliente https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 en 17 ene. 2019

Creo que hay una forma más sencilla de hacerlo:

3 sencillos pasos:

Instale el complemento next-css:

npm install --save @zeit/next-css

Cree en su directorio raíz next.config.js con el siguiente contenido:

// 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 principal: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq en 20 mar. 2019

👍18 🎉12 ❤7

Si alguien está usando la respuesta de @sergiodxa , si nombra la carpeta static la etiqueta del enlace debe hacer referencia a static .

garrettmaring en 14 nov. 2019

😂 parece que la gente lee los problemas de GitHub más que la documentación oficial (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi en 14 nov. 2019

@mtrabelsi , este problema es más valioso que la documentación imo, si desea usar css directamente, por ejemplo, import 'bootstrap-css-only/css/bootstrap.min.css'; , no se menciona nada en la documentación hasta que encontré la respuesta de @Vrq

Tokenyet en 24 nov. 2019

👍1

@timneutkens

Estoy tratando de importar mi propio archivo css normal. Al final, es la forma correcta de importarlo usando la documentación en https://github.com/zeit/next-plugins/tree/master/packages/next-css
¿O es la forma correcta de usar la respuesta de @sergiodxa de 2017, que importa a través de un enlace en la etiqueta <Head> ?

Esto es lo que he encontrado en mi final:

Ambos métodos funcionan cuando carga una página directamente (ir directamente a la URL)
Solo la forma de Sergio funciona cuando navega a una página por primera vez con Router.push (usar la forma de la documentación de next-css no carga el css)
El único problema con el camino de Sergio es que todavía veo el destello de html sin estilo cuando voy a una página por primera vez con Router.push

¿Alguna idea de cómo evitar este flash, sin necesidad de incluir mi css en el archivo _document?

Lo aprecio.