Webpack 中css 如何 import 使用 alias別名 相對路徑

在開發過程當中咱們發現如下問題:

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">