vuejs-templates/webpack

Relative static assets in CSS folder

Open

#932 opened on Sep 20, 2017

View on 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>

Contributor guide

Tech stack
javascriptvuecss
Domain
frontendbuild system
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Vue.jsWebpackCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
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.