在用 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 配置就能生效了。

總結(jié)

~ 視為模塊解析是 webpack 做的事，不是 css-loader 做的事。

各類非 js 直接引用（ import require ）靜態(tài)資源，依賴相對路徑加載問題，都可以用 ~ 語法完美解決；

例如 css module 中： @import "~@/style/theme"

css 屬性中： background: url("~@/assets/xxx.jpg")

html 標(biāo)簽中： <img src="~@/assets/xxx.jpg" alt="alias">

參考資料

vue-webpack 資源路徑的處理

Using url(path) with resolve.alias

CSS Loader Usage Url

總結(jié)

以上所述是小編給大家介紹的Webpack 中 css import 使用 alias 相對路徑的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論