vuejs-templates/webpack

Relative static assets in CSS folder

Open

#932 建立於 2017年9月20日

在 GitHub 查看
 (8 留言) (10 反應) (0 負責人)JavaScript (9,721 star) (4,466 fork)batch import
help wantedneed repro

描述

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>

貢獻者指南

技術棧
javascriptvuecss
領域
frontendbuild system
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
2
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
Vue.jsWebpackCSS
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
60
研究方向
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.
Relative static assets in CSS folder · vuejs-templates/webpack#932 | Good First Issue