vuejs-templates/webpack

Relative static assets in CSS folder

Open

#932 aberto em 20 de set. de 2017

Ver no GitHub
 (8 comments) (10 reactions) (0 assignees)JavaScript (9.721 stars) (4.466 forks)batch import
help wantedneed repro

Description

Just opening a new issue confirming that bug #208 still exists and @githoniel's solution is still necessary today.

This has all to do with using relative paths in CSS files.

<style>
  .element {
    background-image: url('~./assets/img/bg.png');
    // works in dev
    // in production, browser will try to retrieve /static/css/assets/img/bg.png
  }
</style>

Guia do colaborador

Pilha de tecnologia
javascriptvuecss
Domain
frontendbuild system
Tipo Issue
bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
mostly clear
Prerequisites
Vue.jsWebpackCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60
Direção de pesquisa
Review the linked solution in issue #208 and examine the webpack configuration files in the repository, particularly the production webpack config. The issue is that relative paths in CSS are not resolved correctly in production. Implement a fix by adjusting the CSS loader options or publicPath setting. Ensure that assets referenced in CSS are properly copied to the output directory.