問題
vue-cli 4.x版本生成的vue工程，已經自動幫我們配置好了webpack的css-loader【清單詳見這裏】，我們在vue的單文件組件中寫scss樣式的時候，有些屬性，比如background-image，需要配置url，譬如：
background-image：url("/assets/img/background.jpg")
但是這樣的寫法，在webpack的css-loader是無法解析打包的。
分析
這是由於css loader 會把非根路徑的url解析爲相對路徑，加~前綴才解析爲模塊路徑，所以有兩種思路可以解決該問題，一是採用相對路徑，即當前的單文件組件相對於background.jpg的路徑：即../../assets/img/background.jpg，而是採用絕對路徑，上述的寫法看似絕對路徑，但是沒有指定publicPath，默認vue-cli配置的publicPath爲/src，別名爲@，所以正確的絕對路徑爲@/assets/img/background.jpg，但是在scss中@是變量定義的前綴，所以需要加上~以示區分。
解決
第一種思路：
background-image：url("../../assets/img/background.jpg")
第二種思路：
background-image：url("~@/assets/img/background.jpg")