在開發過程中我們發現以下問題:
JS可以用alias，css就報錯
js中:
import tool from `@/utils/xxx` (可以引用)
css中:
@import `@/assets/css/reset.sass` (報錯)
分析
原因是 css 檔案會被用 css-loader 處理，這裡 css @import 後的字串會被 css-loader 視為絕對路徑解析，因為我們並沒有新增 css-loader 的 alias，所以會報找不到 @ 目錄。
解決
在 Webpack 中 css import 使用 alias 相對路徑的解決辦法有兩種；
一是直接為 css-loader 新增 ailas 的路徑，但是在 vue-webpack 給的模板中，單獨針對這個外掛新增配置就顯得麻煩冗餘了；
二是在引用路徑的字串最前面新增上 ~ 符號，如 @import “~@/style/theme”；Webpack 會將以 ~ 符號作為字首的路徑視作依賴模組而去解析，這樣 @ 的 alias 配置就能生效了。
總結
~ 視為模組解析是 webpack 做的事，不是 css-loader 做的事。
各類非 js 直接引用（import require）靜態資源，依賴相對路徑載入問題，都可以用 ~ 語法完美解決；
例如 css module 中： @import “~@/style/theme”
css 屬性中： background: url(“~@/assets/xxx.jpg”)
html 標籤中： <img src=”~@/assets/xxx.jpg” alt=”alias”>