問題是這樣的 ，我有一個公共組件模塊，其中包含less寫的樣式而且樣式中有url形式的背景圖。其他項目在引用這個模塊的時候，會引入這個less文件，項目使用webpack打包后會單獨抽離出css樣式文件（ExtractTextPlugin）。這就導致一個問題，背景圖片使用的相對地址在各個項目中無法找到的，也就是背景圖片報404錯誤。

網上的解決方案

1. 絕對地址

最簡單的但是把圖片上傳到文件服務器，然后使用絕對地址。但是每次更新圖片都要上傳服務器，而且無法控制多個版本。

2. 使用字體文件

這種方法存在跨域問題，不適合公共組件樣式。

3. base64轉碼

如果使用webpack對公共組件模塊進行打包的話，我們可以把file-loader把圖片轉為base64，然后把css一起打包進js。但是如果背景圖片被多次引用會出現許多重復的base64圖片。而且外部項目直接引入es6模塊，所以公共模塊本身沒有必要打包。

各位大佬有沒有什么好的方案，求分享一下經驗啊。

總結

以上是生活随笔為你收集整理的#求教# 公共less模块中的背景图片地址应该怎么处理？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。