search

da2k / curso-reactjs-ninja

915 stars 322 forks source link

[M2#A42] - Stack do Github App: dúvidas sobre fontes, css e build #267

Closed Roger-Melo closed 5 years ago

Roger-Melo commented 5 years ago

Oi, professor! Estou com dúvidas que correspondem até a aula M2#A42 do curso, em um projeto com stack semelhante ao GitHub App. Você pode me ajudar?

build-error-01

build-error-02

@fdaciuk

fdaciuk commented 5 years ago

Fala @Roger-Melo! =)

Vamos lá:

As fontes devem ser inseridas no <head> tanto do template-dev.html quanto do template.html?

R: Isso mesmo!

Na versão de desenvolvimento (yarn start), múltiplas tags <style> estão sendo renderizadas no <head>. É esse o comportamento esperado?

R: É isso mesmo. Na versão de dev, vc usa o style-loader, que coloca o CSS em várias tags style (conforme eles são importados).

A versão de desenvolvimento funciona normalmente, mas ao executar o yarn run build, os erros abaixo são exibidos. Como posso consertar isso?

R: O problema está nas linhas 62 e 67 do seu arquivo webpack.prod.config.js: https://github.com/Roger-Melo/instruct-challenge/blob/fixing-build/webpack.prod.config.js#L62-L67

Quando você vai extrair o CSS para produção usando mais de um loader, é preciso passar um array para o método extract.

Para produção, você quer que sejam gerados arquivos, e não que os estilos sejam renderizados em tags style, inline no HTML, então deixe no método extract somente um array com o css-loader?modules e o sass-loader que tudo deve funcionar como esperado =)

Roger-Melo commented 5 years ago

então deixe no método extract somente um array com o css-loader?modules e o sass-loader que tudo deve funcionar como esperado =)

aeee, funcionou professor =D

Só que surgiu outra dúvida kkk. Pesquisei em outra issue aqui sobre o assunto, mas ainda não ficou claro pra mim.

No css, estou utilizando svgs como background-image. Coloquei a pasta com os svgs dentro de dist, para o browser acessá-los. Só que agora, a versão de desenvolvimento não tem acesso aos svgs. Como posso resolver isso?

Caso seja necessário visualizar, este é o repo, e esse é o arquivo com o path dos svgs

@fdaciuk

fdaciuk commented 5 years ago

Esse não é o melhor caminho a seguir. É importante pensar sempre no seguinte: se um diretório é gerado automaticamente por uma ferramenta de build (como o diretório dist), nada deve ser colocado manualmente lá. Tudo deve ser automático, para que esse diretório possa ser deletado e gerado novamente sem problemas, saca?

Se você colocar coisas lá de forma manual, você nunca vai ter certeza se pode apagar ou não aquele diretório, ou se apagar, vai ter que lembrar de colocar de novo o que você já tinha colocado uma vez, de forma manual.

A forma ideal de fazer isso com webpack é sempre usando loaders. Sempre que você precisar importar qualquer tipo de arquivo que não seja JavaScript, o webpack vai precisar de um loader para lidar com esse import.

Você pode sempre pesquisar na documentação do webpack por [ALGUMA_COISA]-loader, que provavelmente vai ter.

No caso de imagens JPG, PNG, SVG, etc., você pode usar o file-loader, ou url-loader, por exemplo.

A ideia de configurar é sempre a mesma para todos os loaders: olhe a documentação do loader, verifique se ele tem alguma versão específica para a sua versão do webpack, e veja como implementar. Normalmente isso está sempre bem documentado, quando se trata de loaders do webpack =)

Roger-Melo commented 5 years ago

Legal, professor. Consegui! =)

Tem uma parada na documentação que me confundiu um pouco:

file loader

Eles partem do presuposto que o arquivo .svg será utilizado apenas no arquivo .js. Senti falta de um exemplo de caso de uso parecido com o meu contexto, onde essa importação não é necessária, pois vou utilizar o svg como bg image. Será que isso pode ser considerado falha na documentação?

Obrigado por sempre tirar as dúvidas, professor, sei que dou trabalho kkk =)

@fdaciuk

fdaciuk commented 5 years ago

Na verdade, quem faz isso é o próprio css-loader: https://github.com/webpack-contrib/css-loader#css-loader

Veja que a descrição do loader é exatamente essa:

The css-loader interprets @import and url() like import/require() and will resolve them.

Ou seja: sempre que você tiver @import e url(), próprios do CSS, o css-loader vai interpretá-los como se você estivesse usando import (ES Modules) ou require, do Node.js, e vai resolver os caminhos pra você.

A ideia de usar o file-loader é simplesmente pra colocar o arquivo com um nome com hash no diretório dist, quando você gerar o bundle, e fazer cache desse arquivo.

Já o url-loader transforma o arquivo em uma URL em base64 =)

Roger-Melo commented 5 years ago

entendi professor.

Vou parar e olhar a documentação do Webpack com mais calma, pra parar de apanhar hahah.

Muito obrigado =)

fdaciuk commented 5 years ago

Sem crise meu caro! Olhe sempre a documentação do webpack e do loader, que sempre vai ter informações relevantes =)

Qualquer coisa, só avisar :D