Next.js: Método preferido de usar normalize.css?
Qual é a maneira ideal de carregar o normalize.css (idealmente do NPM) de maneira eficiente? Eu gostaria de evitar carregá-lo como um ativo estático e introduzir uma solicitação de cabeçalho apenas para um pouco de CSS.
Glamour tem um glamor/reset extra, mas é muito mais simples do que normalizar, e não é o que eu estou procurando (não tenho certeza de como carregar extras no Glamour de qualquer maneira).
drwpow
Todos 27 comentários
Você pode usar next/head .
nkzawa
em 9 dez. 2016
@nkzawa Eu usei next/head para carregar alguns estilos globais, mas sem css-loader no projeto, como eu poderia exigir um arquivo CSS de node_modules ? E isso pode ser armazenado em cache no final do usuário ou isso aumenta a carga útil a cada solicitação de cabeçalho?
drwpow
em 9 dez. 2016
Você gostaria de definir style como texto em next/head como:
<Head>
<style>{`
body {
margin: 0;
}
`}</style>
</Head>
Você teria que converter normalize.css para .json ou um componente para require , mas essa seria a melhor maneira por enquanto IMO. Se você precisar do arquivo em todas as páginas, ele será agrupado como um fragmento e será carregado apenas uma vez para não inchar a carga útil.
Você também poderá usar css-loader quando https://github.com/zeit/next.js/pull/222 for lançado.
nkzawa
em 9 dez. 2016
Obrigado. Isso é o que eu imaginei, mas não sabia se havia uma maneira mais automática de carregá-lo atualmente. Eu acho que eu poderia executar o Webpack ou Gulp localmente para converter antes que o próximo o atinja.
E é bom saber que next utiliza agrupamento comum. Eu me sinto melhor em enfiar coisas na Cabeça agora. Obrigado por responder minhas perguntas!
Em 9 de dezembro de 2016, às 01:11, Naoyuki Kanezawa [email protected] escreveu:
Você gostaria de definir o estilo como texto em next/head como:
Você teria que converter normalize.css para .json ou um componente para exigir, mas esta seria a melhor maneira para agora IMO. Se você precisar do arquivo em todas as páginas, ele será agrupado como um fragmento e será carregado apenas uma vez para não inchar a carga útil.Você também poderá usar o css-loader quando o #222 for lançado.
—
Você está recebendo isso porque foi o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub ou silencie a conversa.
drwpow
em 9 dez. 2016
Gostaria de salientar que o glamour realmente usa normalize.css embora seja uma versão desatualizada v3.0.2
https://github.com/threepointone/glamor/blob/master/src/reset.js
Fez um pull request
https://github.com/threepointone/glamour/pull/154
Simplesmente importar import 'glamor/reset' funciona bem.
Sinta-se à vontade para usar meu fork se precisar de 5.0 ou aguarde a mesclagem do pull request :)
FrancosLab
em 13 dez. 2016
@FrancosLab Obrigado pela dica! Encontrei glamor/reset mas não percebi que normalizar fazia parte disso – acho que não foi mencionado no README do glamour. Obrigado pelo PR!
drwpow
em 13 dez. 2016
Então, qual é a melhor maneira de fazer isso agora por [email protected] ? Passei várias horas tentando emular o que foi feito com o exemplo with-global-stylesheet sem sorte.
Como normalize.css é um pacote, simplesmente copiar o arquivo não é suficiente (a resolução requer do Node usa package.main ). Além disso, emit-file-loader (e file-loader também) parece estar se comportando de maneira diferente do repositório de exemplo. Parece que ao passar as opções name=dist/[path][name].[ext] para o loader, path sempre começa com - , resultando no arquivo estar em .next/dist/-/node_modules/normalize.css/normalize.css , o que é um problema .
A maneira de contornar isso é basicamente copiar todo o arquivo $# normalize.css 10$#$ para a pasta static ou talvez inserir tudo em uma tag style (estou usando componentes estilizados para o estilo, no entanto).
Eu tentei usar webpack-copy-plugin mas parece que a pasta static não é servida de .next mas na verdade da própria pasta raiz <root-folder>/static (onde pages lives) então isso também não funcionou.
Agora que o Next.js não depende do Glamour, alguma dica para avançar com isso?
EDIT: 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
em 23 fev. 2017
O exemplo with-global-stylesheet acabou de ser atualizado aqui: #1327!
migueloller
em 2 mar. 2017
1327 ainda não funciona para algo tão simples quanto import 'normalize.css' . O principal problema parece ser que, como o Webpack não é executado no servidor, você não pode importar arquivos não-js em nenhum arquivo executado no servidor.
migueloller
em 2 mar. 2017
@migueloller talvez pudesse mudar para Webpack universal após a v2.0...: https://github.com/zeit/next.js/issues/1245
sedubois
em 2 mar. 2017
@sedubois , esperando ansiosamente por isso! 😄
migueloller
em 2 mar. 2017
você pode adicionar seu voto lá 😉
sedubois
em 2 mar. 2017
Pessoal, tenho importado normalize muito bem através de sass-loader , mesmo sem o includePaths que acabou de ser mesclado. Tudo o que você precisa fazer é instalar normalize-scss (a porta Sass de normalize.css ) e adicionar <strong i="10">@import</strong> '~normalize-scss'; no seu nível mais alto ( _document personalizado, layout ou página) onde você incluiria uma folha de estilo scss da mesma forma que with-global-stylesheet .
Agora, se você preferir importar o original, aposto que você poderia configurar um alias para node_modules usando babel-plugin-module-resolver do jeito que fiz com styles no exemplo e depois importá-lo com js + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .
orlin
em 2 mar. 2017
@orlin , você não pode simplesmente importá-lo com JS porque ele gerará um erro no servidor, pois não passa pelo Webpack.
migueloller
em 2 mar. 2017
@migueloller , deve funcionar bem, da mesma forma que scss é importado de js no exemplo with-global-stylesteet . Ambos css e scss são manipulados por carregadores Webpack no next.config.js e convertidos para js. Só não forneci import normalize from '...' , pois precisaria instalar normalize.css e configurar um alias babel-plugin-module-resolver para fornecer um caminho ... que funcione.
orlin
em 2 mar. 2017
@orlin ,
Eu clonei o exemplo, adicionei normalize.css e brinquei um pouco com ele. Você está certo, é possível fazê-lo funcionar!
Eu tive que fazer uma configuração personalizada para isso, onde o nome de saída do arquivo emitido era dist/[path]index.js devido ao fato de que, se você não copiar o package.json , o require do Node node_modules ), você precisa configurar uma regra de Webpack apenas para normalize.css (além de outros pacotes que você possa estar usando).
Isso funciona como uma correção de curto prazo, mas definitivamente seria bom ter algo que funcione fora da caixa, como está sendo discutido em # 1245 e https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969
@rauchg , você acha que seria uma boa ideia fazer um exemplo para pacotes que existem em node_modules ? Eu não me importaria de fazer um novo exemplo ou estender o with-global-stylesheet .
migueloller
em 2 mar. 2017
@migueloller adicioná-lo ao mesmo exemplo provavelmente seria preferível
rauchg
em 2 mar. 2017
@migueloller Encontrei uma maneira super limpa de "melhores práticas" de fazer isso. Farei um PR em with-global-stylesheet ... Espero que você não tenha perdido muito tempo hackeando-o.
orlin
em 3 mar. 2017
Estilos globais, incluindo redefinições ou normalização, são um antipadrão de qualquer maneira. Os componentes devem controlar seus próprios estilos. Normalize é o jQuery do CSS.
jaydenseric
em 9 mar. 2017
@jaydenseric você está correto que Normalize.css é o jQuery do CSS. Os navegadores ainda são bastante inconsistentes em seu estilo padrão de elementos HTML, o Normalize.css ajuda a lidar com esse problema. Normalize.css é uma necessidade para suporte a navegadores legados para projetos modernos.
btnwtn
em 9 abr. 2017
Aqui está a abordagem que eu 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
em 1 mar. 2018
@vinzcelavi Por que você libera os estilos?
sospedra
em 12 nov. 2018
@sospedra não faço ideia 😬 Talvez possa ajudar: https://github.com/zeit/styled-jsx#styled -jsxserver
vinzcelavi
em 13 nov. 2018
Você provavelmente não quer fazer isso, mas chame Document.getInitialProps conforme a documentação atualizada: https://github.com/zeit/next.js/#custom -document
timneutkens
em 13 nov. 2018
Por que não é bom colocar uma tag link com o URL da CDN dentro do Head ? Funcionou para mim.
janoist1
em 4 dez. 2018
@janoist1 Acho que o problema aqui é que gostaríamos de nos normalizar a partir de agora, em vez de depender de uma CDN externa. Está bem no desenvolvimento, mas não quero depender de nada externo na produção.
IAmNatch
em 8 mar. 2019
Aqui estão duas maneiras de resolver isso se usar next-css não for uma opção para você (talvez você esteja usando módulos CSS, portanto, importar um arquivo CSS de _app não se aplicará globalmente).
Primeiro incluímos um link dentro de Head para normalize.css e, em seguida, aplicamos alguns estilos globais personalizados via <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
em 10 mar. 2019
Questões relacionadas
lixiaoyan
·
3Comentários
renatorib
·
3Comentários
knipferrc
·
3Comentários
YarivGilad
·
3Comentários
sospedra
·
3Comentários
Comentários muito úteis
@jaydenseric você está correto que Normalize.css é o jQuery do CSS. Os navegadores ainda são bastante inconsistentes em seu estilo padrão de elementos HTML, o Normalize.css ajuda a lidar com esse problema. Normalize.css é uma necessidade para suporte a navegadores legados para projetos modernos.