起因
在用 Webpack 處理打包時，可將某一目錄配置一個別名，程式碼中就能使用與別名的相對路徑引用資源。
在 Vue 專案中，我們通常使用 vue-webpack 腳手架生成工程模板，然後配置 @ 為專案根目錄下放資源和原始碼的 /src 目錄的別名；
...,
resolve: {
...,
alias: {
`@`: resolve(`src`)
}
}
複製程式碼這樣我們就可以在 js 檔案中用形如 import tool from `@/utils/xxx` 的方式引用 /src/utils/xxx.js 檔案，並且 Webpack 能正確識別並打包。
但是在 css 檔案，如 less, sass, stylus 中，使用 @import "@/style/theme" 的語法引用相對 @ 的目錄確會報錯，”找不到 `@` 目錄”，說明 webpack 沒有正確識別資源相對路徑。
分析
原因是 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">