Webpack 中 css import 使用 alias 相對路徑

原由

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

參考資料

• vue-webpack 資源路徑的處理
• Using url(path) with resolve.alias
• CSS Loader Usage Url

轉自: wiki.zthxxx.me/wiki/%E6%8A…