在用 Webpack 處理打包時(shí)，可將某一目錄配置一個(gè)別名，代碼中就能使用與別名的相對(duì)路徑引用資源。

在 Vue 項(xiàng)目中，我們通常使用 vue-webpack 腳手架生成工程模板，然后配置 @ 為項(xiàng)目根目錄下放資源和源碼的 /src 目錄的別名；

...,
resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}

這樣我們就可以在 js 文件中用形如 import tool from '@/utils/xxx' 的方式引用 /src/utils/xxx.js 文件，并且 Webpack 能正確識(shí)別并打包。

但是在 css 文件，如 less, sass, stylus 中，使用 @import "@/style/theme" 的語(yǔ)法引用相對(duì) @ 的目錄確會(huì)報(bào)錯(cuò)，"找不到 '@' 目錄"，說(shuō)明 webpack 沒(méi)有正確識(shí)別資源相對(duì)路徑。

分析

原因是 css 文件會(huì)被用 css-loader 處理，這里 css @import 后的字符串會(huì)被 css-loader 視為絕對(duì)路徑解析，因?yàn)槲覀儾](méi)有添加 css-loader 的 alias ，所以會(huì)報(bào)找不到 @ 目錄。

解決

在 Webpack 中 css import 使用 alias 相對(duì)路徑的解決辦法有兩種；

一是直接為 css-loader 添加 ailas 的路徑，但是在 vue-webpack 給的模板中，單獨(dú)針對(duì)這個(gè)插件添加配置就顯得麻煩冗余了；

二是在引用路徑的字符串最前面添加上 ~ 符號(hào)，如 @import "~@/style/theme" ；Webpack 會(huì)將以 ~ 符號(hào)作為前綴的路徑視作依賴模塊而去解析，這樣 @ 的 alias 配置就能生效了。

總結(jié)

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

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

例如 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 相對(duì)路徑的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論