Next.js: Incluir CSS em um próximo projeto?

Criado em 27 nov. 2016 · 31Comentários · Fonte: vercel/next.js

Eu sei que Next usa Glamour e css-in-js. Mas, existe alguma maneira de usar css/less/scss real em um próximo projeto... de alguma forma? Pelo menos para inicializar um projeto?

Meu raciocínio é este - para sites simples, como os que o Next é direcionado, a maioria dos temas html pré-fabricados que podem ser comprados on-line são feitos usando html puro e css. Então, tudo que você precisa fazer é dividir o HTML em componentes react, colocá-los nas pastas de página apropriadas e pronto.

Eu realmente adoraria usar o Next para o meu projeto, mas se eu não conseguir alavancar de alguma forma o CSS pronto, seria um problema para mim. Existe uma solução ou uma solução alternativa para este caso de uso?

Fonte

manolkalinov

Comentários muito úteis

Crie uma pasta /static no mesmo nível da pasta /pages .
Nessa pasta coloque seus arquivos .css
Nos componentes da sua página, importe Head e adicione um <link /> ao seu 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>
)

E pronto, desta forma o Next.js deve renderizar a tag do link no cabeçalho da página e o navegador irá baixar o CSS e aplicá-lo.

sergiodxa em 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Todos 31 comentários

Crie uma pasta /static no mesmo nível da pasta /pages .
Nessa pasta coloque seus arquivos .css
Nos componentes da sua página, importe Head e adicione um <link /> ao seu 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>
)

E pronto, desta forma o Next.js deve renderizar a tag do link no cabeçalho da página e o navegador irá baixar o CSS e aplicá-lo.

sergiodxa em 27 nov. 2016

👍79 👎17 🎉7 ❤2 🚀1

Uau, obrigado pela resposta rápida :). Funciona! Há apenas um problema - ao carregar a página pela primeira vez, há um flash do html sem estilo antes de tudo ser renderizado corretamente. Não tenho certeza se é de arquivos css ou js carregados post-react. Teria alguma solução para isso?

De qualquer forma, estou absolutamente impressionado com o trabalho que vocês estão fazendo e obrigado novamente pela resposta rápida!

manolkalinov em 28 nov. 2016

Não importa, eu importei o componente de cabeçalho com os links css e js na página de índice também, e o flash desapareceu. Além disso, alterar as tags de âncora para componentes Link remove qualquer salto restante. A desvantagem é que o componente Link parece remover quaisquer tags html de seus filhos (como tags span com classes de ícones), de modo que apenas o texto seja deixado.

Eu sei que esse caso de uso é o oposto de correto e otimizado, mas é muito útil para casos em que temos que recorrer ao rápido e sujo...feiúra :)

Portanto, o fluxo de trabalho para integrar um tema html pré-fabricado é este:

crie uma pasta estática e copie/mova todos os arquivos js/css/img do modelo
crie um arquivo page.js com um componente
Adicione o html ao componente e modifique-o para estar em conformidade com o react
3.1. adicione a tag Head e nela inclua todos os arquivos css/js do html original
3.2. atualize o caminho para esses arquivos para corresponder à nova pasta estática
3.3. Copie/cole o html abaixo da tag head
3.4 Fechar ou fechar automaticamente quaisquer tags html não fechadas (incluindo tags de link, input e img)
3.5. Localizar/substituir todas as instâncias de class=" por className="
3.6. Remover todos os comentários html

manolkalinov em 28 nov. 2016

👍9 🎉3 😄3

@manolkalinov você pode anexar seu código para facilitar a referência? Eu sei que você escreveu o fluxo de trabalho, mas um código de exemplo facilita o acompanhamento e a depuração se ocorrer um problema.

ralphievolt em 29 nov. 2016

👍1

Adicionar CSS na tag head funciona com certeza. No entanto, é meio hacky e se quisermos usar algo como postcss ou sass ? Como converter estilos CSS existentes em objeto JSON glamour? Também é muito difícil para os designers estilizar a página usando glamor . Deve haver uma maneira melhor de fazer isso.
A propósito, comparado aos Módulos CSS, qual é o benefício de usar glamor ?

dzcpy em 30 nov. 2016

👍6

@andyhu leia https://github.com/zeit/next.js#faq sobre o benefício de usar glamor .
Sobre postcss ou sass , personalizar a configuração do webpack permitiria que você os usasse (https://github.com/zeit/next.js/pull/222), ou acho que você pode apenas compile esses arquivos para css antes de executar next .

nkzawa em 1 dez. 2016

Acho que está resolvido. Sinta-se à vontade para reabrir se ainda tiver o problema. Obrigado pela resposta @sergiodxa !

nkzawa em 1 dez. 2016

@nkzawa Eu uso customizar a configuração do webpack, então posso usar menos no meu projeto. aqui está meu código
next.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
}

então eu exijo o arquivo menos import './index.less' , mas ocorre um erro

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

Tenho certeza que instalei less , less-loader , css-loader , style-loader , você pode dar alguma sugestão, obrigado antecipadamente.

kimown em 5 jan. 2017

Você deveria tentar

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

bkniffler em 9 jan. 2017

@kimown Você conseguiu importar o arquivo less? Se sim, você se importaria de compartilhar como você fez isso?

crodriguezvega em 25 jun. 2017

@sergiodxa Como posso importar css de node_modules?

saadbinsaeed em 19 jul. 2017

👍17

Eu mesmo tive essa pergunta sobre a importação de CSS de um pacote npm.

Por exemplo, rc-slider

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

notrab em 19 jul. 2017

👍12

Havia uma resposta para isso? @notrab

paulwehner em 26 ago. 2017

@notrab
Tente isso

Em seu componente root ou _document

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

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

saadbinsaeed em 28 ago. 2017

😕3 👍1

@saadbinsaeed Eu tentei isso. Funciona para componentes e páginas próprias. Mas eu quero agrupá-lo com o webpack, em vez de tê-lo em linha.

schoenwaldnils em 15 set. 2017

👍1

@schoenwaldnils Tentei fazer isso, mas não consegui. De acordo com meu entendimento, estamos usando um aplicativo do lado do servidor para que não possamos agrupar os arquivos css separados e enviá-los ao cliente porque o servidor não sabe o que é css. temos que incorporar o css em nosso html. Para acessá-lo em todo o seu aplicativo, incorpore-o no componente raiz ou vincule-o no cabeçalho, conforme mostrado acima por @sergiodxa.

saadbinsaeed em 15 set. 2017

Eu tentei a abordagem @sergiodxa , mas não funciona para mim. Isso ainda é aplicável com as versões mais recentes do Next?

nickwild-999 em 14 out. 2017

@sergiodxa obrigado. Só eu estava procurando.

fredybustos em 30 nov. 2017

@sergiodxa Você deve alterar suas respostas. Não é estática ! Deve ser estático

ayberkanilatsiz em 6 dez. 2017

👍2

Usar importações de CSS é simples agora usando https://github.com/zeit/next-plugins

Desculpe pelo problema de 1 ano. Aparentemente, as pessoas acabam aqui através do google.

timneutkens em 22 ago. 2018

👍1

Usar importações de CSS é simples agora usando https://github.com/zeit/next-plugins
Desculpe pelo problema de 1 ano. Aparentemente, as pessoas acabam aqui através do google.

Na verdade, não. Não consigo encontrar uma maneira fácil de importar css diretamente do node_module. Isso é por design?

cyberdude em 14 set. 2018

👍6

Usar importações de CSS é simples agora usando https://github.com/zeit/next-plugins
Desculpe pelo problema de 1 ano. Aparentemente, as pessoas acabam aqui através do google.
Na verdade, não. Não consigo encontrar uma maneira fácil de importar css diretamente do node_module. Isso é por design?

Não muito depois da próxima versão 7, você já deu uma olhada? é ainda mais fácil do que antes ;)

mtrabelsi em 30 set. 2018

@mtrabelsi você poderia dar um exemplo de como você importa css diretamente do módulo de nó no Next.js 7 porque estou preso a ele. Eu preciso importar alguns estilos do módulo de nó, mas não consigo encontrar uma solução que funcione.

bogdan100 em 13 nov. 2018

Corrigimos esse problema usando copy-webpack-plugin.
Na configuração do webpack (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 em 13 dez. 2018

você pode verificar uma correção para a correção css do lado do cliente https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 em 17 jan. 2019

Acho que existe uma maneira mais simples de fazer isso:

3 passos simples:

Instale o plugin next-css:

npm install --save @zeit/next-css

Crie em seu diretório raiz next.config.js com o seguinte conteúdo:

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Agora você deve poder importar styleshets de node_modules assim:

import 'bootstrap-css-only/css/bootstrap.min.css';

_Observação: Usando Próximo v 8+_

Fundo:
Passei algumas horas tentando simplesmente importar um CSS instalado como node_module e as várias soluções são principalmente soluções alternativas, mas, como mostrado acima, existe uma solução simples.
Foi fornecido por um dos membros da equipe principal: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq em 20 mar. 2019

👍18 🎉12 ❤7

Se alguém estiver usando a resposta de @sergiodxa , se você nomear a pasta static a tag do link deve referenciar static .

garrettmaring em 14 nov. 2019

😂 parece que as pessoas lêem os problemas do GitHub mais do que a documentação oficial (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi em 14 nov. 2019

@mtrabelsi , Este problema é mais valioso do que a documentação imo, se você quiser usar css diretamente, por exemplo import 'bootstrap-css-only/css/bootstrap.min.css'; , não há menção na documentação até encontrar a resposta do @Vrq

Tokenyet em 24 nov. 2019

👍1

@timneutkens

Estou tentando apenas importar meu próprio arquivo css normal. No final está a maneira correta de importá-lo usando a documentação em https://github.com/zeit/next-plugins/tree/master/packages/next-css
ou é a maneira correta de usar a resposta do @sergiodxa de 2017, que importa através de um link na tag <Head> ?

Aqui está o que eu encontrei no meu final:

Ambos os métodos funcionam quando você carrega uma página diretamente (vá diretamente para a url)
Somente o modo Sergios funciona quando você navega para uma página pela primeira vez com Router.push (usando o caminho da documentação next-css não carrega o css)
Único problema com o jeito do Sergio é que ainda vejo o flash do html sem estilo ao ir para uma página pela primeira vez com Router.push

Alguma ideia de como evitar esse flash, sem precisar incluir meu css no arquivo _document?

Aprecie isso.