Vue安裝sass-loader和node-sass版本匹配的報錯問題
Vue安裝sass-loader和node-sass版本匹配報錯
最近一周沒有更新博客是由于手頭有點(diǎn)布置的項目，每天比較忙過的也很充足，基本時間安排的滿滿的
今天休息天就去外面跑了跑歩把一周的壓印都釋放了出去，瞬間感覺心情開朗了很多
晚上回來頭腦感覺比較清晰就把以前遇到過的一個Bug以及解決思路通過復(fù)盤給大家分享一下
接下來步入正題
我們在寫vue項目的時候有時候大家會用到scss這時候就需要安裝依賴sass-loader和node-sass，但是這倆個安裝是十分坑爹的，它們倆會由于這個版本匹配沖突的原因?qū)е逻\(yùn)行報錯，當(dāng)時我在這個坑中踩了好久，接下來我把報錯代碼獻(xiàn)上(圖文結(jié)合方便大家理解)
我這個vue項目已經(jīng)默認(rèn)安裝了 vue-style-loader，不要多此一舉。免得版本沖突。
到時候又會出現(xiàn)更多問題。
第二種報錯原因是可能會存在的:就是直接安裝也會安裝最新版本的
npm install node-sass --save-dev //安裝node-sass npm install sass-loader --save-dev //安裝sass-loader
安裝完成后就會運(yùn)行就會報錯附上報錯圖
網(wǎng)上說是因為sass-loader安裝的版本太高，卸載重新安裝低版本即可，網(wǎng)上大部分都是安裝的7的版本，我裝的是7.3.1
解決方法
很簡單如果你是我上面那種安裝方式之一而且正好報錯的話請用我接下來獻(xiàn)上的解決方法
先卸載之前的sass-loader node-sass版本
npm uninstall sass-loader npm uninstall node-sass -D
然后重新裝7.3.1 sass-loader的版本 由于sass-loader期望的node-sass值為^4.0.0：所以我們滿足他這個小小的愿望，安裝sass-loader@7.3.1和node-sass@4.13.1版本
npm install sass-loader@7.3.1 --save-dev npm install node-sass@4.14.1 --save-dev
然后呢就大功告成了，直接運(yùn)行成功有沒有很簡單
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
在Vue中使用scoped屬性實現(xiàn)樣式隔離的原因解析
scoped是Vue的一個特殊屬性,可以應(yīng)用于<style>標(biāo)簽中的樣式,這篇文章給大家介紹在Vue中,使用scoped屬性為什么可以實現(xiàn)樣式隔離,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue如何清空對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了利用vueJs實現(xiàn)圖片輪播實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
解決vue創(chuàng)建項目使用vue-router和vuex報錯Object(...)is not a&nb
這篇文章主要介紹了解決vue創(chuàng)建項目使用vue-router和vuex報錯Object(...)is not a function問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
jenkins自動構(gòu)建發(fā)布vue項目的方法步驟
這篇文章主要介紹了jenkins自動構(gòu)建發(fā)布vue項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue的webcamjs集成方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3 computed初始化獲取設(shè)置值實現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)選項卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案
這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案，非常具有實用價值，需要的朋友可以參考下2017-09-09