Next.js: ¿Método preferido para usar normalize.css?
¿Cuál es la forma ideal de cargar normalize.css (idealmente desde NPM) de manera eficiente? Me gustaría evitar cargarlo como un activo estático e introducir una solicitud de encabezado solo por un poquito de CSS.
Glamour tiene un extra glamor/reset , pero es mucho más simple que normalizar, y no es lo que estoy buscando (de todos modos, no estoy muy seguro de cómo cargar extras en Glamour a partir de ahora).
drwpow
Todos 27 comentarios
Puedes usar next/head .
nkzawa
en 9 dic. 2016
@nkzawa He usado next/head para cargar algunos estilos globales, pero sin css-loader en el proyecto, ¿cómo podría requerir un archivo CSS de node_modules ? ¿Y esto se puede almacenar en caché en el extremo del usuario o esto infla la carga útil en cada solicitud de encabezado?
drwpow
en 9 dic. 2016
Le gustaría definir style como texto en next/head como:
<Head>
<style>{`
body {
margin: 0;
}
`}</style>
</Head>
Tendría que convertir normalize.css a .json o un componente a require , pero esta sería la mejor manera por ahora, en mi opinión. Si necesita el archivo en todas las páginas, entonces se agrupa como un fragmento y se carga solo una vez para que no aumente la carga útil.
También podrá usar css-loader cuando se publique https://github.com/zeit/next.js/pull/222 .
nkzawa
en 9 dic. 2016
Gracias. Esto es lo que pensé, pero no sabía si había una forma más automática de cargarlo actualmente. Supongo que podría ejecutar Webpack o Gulp localmente para convertir antes de que llegue el próximo.
Y es bueno saber que next utiliza fragmentación común. Ahora me siento mejor metiéndome cosas en la cabeza. ¡Gracias por responder mis preguntas!
El 9 de diciembre de 2016 a las 01:11, Naoyuki Kanezawa [email protected] escribió:
Le gustaría definir el estilo como texto en el siguiente/título como:
Tendría que convertir normalize.css a .json o un componente requerido, pero esta sería la mejor manera por ahora, en mi opinión. Si necesita el archivo en todas las páginas, entonces se agrupa como un fragmento y se carga solo una vez para que no aumente la carga útil.También podrá usar css-loader cuando se lance el n.º 222.
—
Usted está recibiendo esto porque usted fue el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub o silencie el hilo.
drwpow
en 9 dic. 2016
Me gustaría señalar que Glamour en realidad usa normalize.css aunque es una versión obsoleta v3.0.2
https://github.com/trespuntos/glamour/blob/master/src/reset.js
Hizo una solicitud de extracción
https://github.com/trespuntos/glamour/pull/154
Simplemente importar import 'glamor/reset' funciona bien.
Siéntase libre de usar mi bifurcación si necesita 5.0 o espere a que se fusione la solicitud de extracción :)
FrancosLab
en 13 dic. 2016
@FrancosLab ¡ Gracias por el consejo! Me encontré con glamor/reset pero no me di cuenta de que normalizar era parte de él; no creo que se haya mencionado en el LÉAME de glamour. ¡Gracias por el PR!
drwpow
en 13 dic. 2016
Entonces, ¿cuál es la mejor manera de hacer esto ahora mismo por [email protected] ? Pasé varias horas tratando de emular lo que se hizo con el ejemplo with-global-stylesheet sin suerte.
Debido a que normalize.css es un paquete, simplemente copiar el archivo no es suficiente (la resolución requerida de Node usa package.main ). Además, emit-file-loader (y file-loader también) parece comportarse de manera diferente al repositorio de ejemplo. Parece que al pasar las opciones name=dist/[path][name].[ext] al cargador, path siempre comienza con - , lo que hace que el archivo esté en .next/dist/-/node_modules/normalize.css/normalize.css , lo cual es un problema .
La forma de evitar esto es básicamente copiar todo el archivo normalize.css en la carpeta static o quizás en línea todo en una etiqueta style (estoy usando componentes con estilo aunque para peinar).
Intenté usar webpack-copy-plugin pero parece que la carpeta static no se sirve desde .next sino desde la carpeta raíz misma <root-folder>/static (donde pages vidas) por lo que tampoco funcionó.
Ahora que Next.js no depende de Glamour, ¿algún consejo para seguir adelante con esto?
EDITAR: Relacionado: https://github.com/zeit/styled-jsx/issues/83 , https://github.com/zeit/styled-jsx/pull/100 , https://github.com/zeit/ next.js/issues/544
migueloller
en 23 feb. 2017
El ejemplo with-global-stylesheet acaba de actualizarse aquí: ¡#1327!
migueloller
en 2 mar. 2017
1327 todavía no funciona para algo tan simple como import 'normalize.css' . El problema principal parece ser que debido a que Webpack no se ejecuta en el servidor, no puede importar archivos que no sean js en ningún archivo que se ejecute en el servidor.
migueloller
en 2 mar. 2017
@migueloller tal vez podría cambiar a Universal Webpack después de v2.0...: https://github.com/zeit/next.js/issues/1245
sedubois
en 2 mar. 2017
@sedubois , esperando ansiosamente eso! 😄
migueloller
en 2 mar. 2017
puedes agregar tu voto allí 😉
sedubois
en 2 mar. 2017
Chicos, he estado importando normalize muy bien a través sass-loader , incluso sin el includePaths que acaba de fusionarse. Todo lo que tiene que hacer es instalar normalize-scss (el puerto Sass de normalize.css ) y agregar <strong i="10">@import</strong> '~normalize-scss'; en su nivel más alto (personalizado _document , diseño o página) donde incluiría una hoja de estilo scss como lo hace with-global-stylesheet .
Ahora, si prefiere importar el original, apuesto a que podría configurar un alias para node_modules usando babel-plugin-module-resolver la forma en que lo hice con styles en el ejemplo y luego importarlo con js + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .
orlin
en 2 mar. 2017
@orlin , no puede simplemente importarlo con JS porque arrojará un error en el servidor ya que no pasa por Webpack.
migueloller
en 2 mar. 2017
@migueloller , debería funcionar bien, de la misma manera que scss se importa desde js en el ejemplo with-global-stylesteet . Tanto css como scss son manejados por cargadores de paquetes web en next.config.js y convertidos a js. Simplemente no proporcioné import normalize from '...' ya que necesitaría instalar normalize.css y configurar un alias de babel-plugin-module-resolver para brindarle una ruta ... que funcione.
orlin
en 2 mar. 2017
@orlín ,
Cloné el ejemplo, agregué normalize.css y jugué un poco con él. Tienes razón, ¡es posible hacerlo funcionar!
Sin embargo, tuve que hacer una configuración personalizada para él, donde el nombre de salida del archivo emitido era dist/[path]index.js debido al hecho de que si no copia el package.json entonces el require de Node node_modules ), debe configurar una regla de Webpack solo para normalize.css (además de otros paquetes que podría estar usando).
Esto funciona como una solución a corto plazo, pero definitivamente sería bueno tener algo que funcione de inmediato, como se analiza en #1245 y https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969
@rauchg , ¿crees que sería una buena idea hacer un ejemplo para los paquetes que existen en node_modules ? No me importaría hacer un nuevo ejemplo o extender el with-global-stylesheet .
migueloller
en 2 mar. 2017
@migueloller agregarlo al mismo ejemplo probablemente sería preferible
rauchg
en 2 mar. 2017
@migueloller Encontré una forma súper limpia de "mejores prácticas" para hacer esto. Haré una PR en with-global-stylesheet ... Espero que no hayas pasado demasiado tiempo hackeándolo.
orlin
en 3 mar. 2017
Los estilos globales, incluidos los reinicios o la normalización, son un antipatrón de todos modos. Los componentes deben controlar sus propios estilos. Normalize es el jQuery de CSS.
jaydenseric
en 9 mar. 2017
@jaydenseric tienes razón en que Normalize.css es el jQuery de CSS. Los navegadores siguen siendo bastante inconsistentes en el estilo predeterminado de los elementos HTML, Normalize.css ayuda a solucionar ese problema. Normalize.css es una necesidad para la compatibilidad con navegadores heredados para proyectos modernos.
btnwtn
en 9 abr. 2017
Aquí está el enfoque que uso: (https://github.com/zeit/next.js/#custom-document)
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const { html, head, errorHtml, chunks } = renderPage()
const styles = flush()
return { html, head, errorHtml, chunks, styles }
}
render() {
return (
<html>
<Head>
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
</Head>
<body className="custom_class">
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
}
vinzcelavi
en 1 mar. 2018
@vinzcelavi ¿Por qué tiras los estilos?
sospedra
en 12 nov. 2018
@sospedra No tengo idea 😬 Tal vez podría ayudar: https://github.com/zeit/styled-jsx#styled -jsxserver
vinzcelavi
en 13 nov. 2018
Probablemente no quiera hacer eso, sino llamar a Document.getInitialProps según la documentación actualizada: https://github.com/zeit/next.js/#custom -document
timneutkens
en 13 nov. 2018
¿Por qué no está bien colocar una etiqueta link con la URL de CDN dentro de Head ? Funcionó para mí.
janoist1
en 4 dic. 2018
@janoist1 Creo que el problema aquí es que nos gustaría normalizarnos a partir de ahora, en lugar de depender de una CDN externa. Está bien en desarrollo, pero no quiero depender de nada externo en producción.
IAmNatch
en 8 mar. 2019
Aquí hay dos formas de resolver esto si usar next-css no es una opción para usted (tal vez esté usando módulos CSS, por lo que importar un archivo CSS desde _app no se aplicará globalmente).
Primero incluimos un link dentro de Head para normalize.css y luego aplicamos algunos estilos globales personalizados a través <style type='text/css'>{globalStyles}</style>
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
const globalStyles = `
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
`
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta charSet='utf-8' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' />
<style type='text/css'>{globalStyles}</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
transitive-bullshit
en 10 mar. 2019
Temas relacionados
ghost
·
3Comentarios
formula349
·
3Comentarios
irrigator
·
3Comentarios
havefive
·
3Comentarios
kenji4569
·
3Comentarios
Comentario más útil
@jaydenseric tienes razón en que Normalize.css es el jQuery de CSS. Los navegadores siguen siendo bastante inconsistentes en el estilo predeterminado de los elementos HTML, Normalize.css ayuda a solucionar ese problema. Normalize.css es una necesidad para la compatibilidad con navegadores heredados para proyectos modernos.