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