Vue CLI3搭建的項目中路徑相關問題的解決

大致意思就是， sass-loader 并不提供 url 的重寫，所有的 scss 文件被 sass-loader 處理成最終的 CSS 后（編譯過程中 url 不會被重寫即保持原樣），再傳遞給 css-loader 處理。也就是說，所有的 url 都是相對于輸出的！在 Vue CLI 搭建的項目中，它們都是相對于使用這些 scss 文件的 vue 文件的。對于上例，是相對于 app.vue 的，因此報錯。我們會很自然的會希望路徑的引用是相對于 scss 文件本身的，sass-loader 文檔中也給出了解決方案：

Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.
Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path. Check out this working bootstrap example.

第一個方法：使用 resolve-url-loader 來彌補 sass-loader 缺失的 url 重寫功能，注意要放到 sass-loader 以前調用。

第二個方法：Library 作者一般都會提供變量，用來設置資源路徑，如 bootstrap-sass 可以通過 $icon-font-path 來設置。參見this working bootstrap example。

這樣看來解決的思路有兩種：

1. 寫 url 的時候就寫 vue 文件相對于資源的路徑。這種方法較為暴力，當項目層級復雜了之后容易寫錯路徑（加上現有的編輯器、IDE應該認為你寫的路徑是錯誤的）。當同個 scss 文件被多個不同層級的 vue 文件引用的時候，這種暴力的方法就行不通了！
2. 使用第三方庫補充 sass-loader 的路徑重寫功能，讓路徑的引用是相對于當前 scss 文件本身的。這個方法能較好的解決問題。

在這里提供一下我喜歡的方法。與其考慮 讓路徑的引用是相對于 scss 文件本身 或 讓路徑直接相對于 vue 文件，我們可以換個思路，讓所有路徑都是以根目錄往下找，并讓 webpack 對路徑進行重寫，但是直接用 /src/ 這種絕對路徑的寫法會讓這些資源不被 webpack 打包。在前文提及到的，webpack 有個強大的機制，也就是 ~，通過在 url 前面添加 ~ 可以告訴 webpack 要把它當做一個模塊來處理，也就是會被 webpack 打包。配合 webpack 提供的別名 @（/src），我們可以對上例做修改：

// iconfont.scss
@font-face {
 font-family: "iconfont";
 src: url("~@/assets/fonts/iconfont.eot");
 ...
}

這樣子，通過 webpack 對模塊的處理，可以正確通過編譯！這樣做的好處是可大大避免書寫相對路徑可能產生的錯誤，每次只需“無腦”從根目錄往下找就是了，又可以減小依賴、減少配置項。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com