Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como fazer o webpack não alterar o url das imagens usadas no css ? background: url('./path/image.png')

Minha dúvida é o seguinte, quando eu importo meu css como um modulo de JS ele faz toda a compilacao corretamente com o style-loader e o css-loader, porem quando eu vou olhar no navegador todas as imagens que eu coloquei como background-image no css ela altera para um hash maluco, ex : 5545ef45ef45efe5f45e4f5ef45e4f5ef4.png. Eu queria que não alterasse é possível....deixar como eu coloquei no css antes de "compilar" ? Pois dai minhas imagens nao aparecem pois eu nao fiz referencia pra aqueles hash malucos e sim para uma url absoluta.....

Obrigado!

3 respostas

Fala aí Estéfani, tudo bem? Consegue postar o código de configuração do seu Webpack? Ficaria mais fácil para tentar ajudar.

Mas, você pode tentar fazer o seguinte, se o seu código estiver assim:

{
    test: /.*\.(gif|png|jpe?g|svg)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '/images/[name]_[hash:7].[ext]',
            }
        },
    ]
}

Você pode tentar retirar o hash:7 do name:

{
    test: /.*\.(gif|png|jpe?g|svg)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '/images/[name].[ext]',
            }
        },
    ]
}

Espero ter ajudado.

solução!

Eu consegui resolver aqui estava faltando aspas no meu url() do css...Obrigado!

Boa Estéfani, se a dúvida foi solucionada, não deixe de marcar o tópico como solucionado para que possa ajudar outros alunos com a mesma dúvida.

Abraços