Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題
Vue安裝sass-loader和node-sass版本匹配報(bào)錯(cuò)
最近一周沒(méi)有更新博客是由于手頭有點(diǎn)布置的項(xiàng)目，每天比較忙過(guò)的也很充足，基本時(shí)間安排的滿滿的
今天休息天就去外面跑了跑歩把一周的壓印都釋放了出去，瞬間感覺(jué)心情開(kāi)朗了很多
晚上回來(lái)頭腦感覺(jué)比較清晰就把以前遇到過(guò)的一個(gè)Bug以及解決思路通過(guò)復(fù)盤給大家分享一下
接下來(lái)步入正題
我們?cè)趯?xiě)vue項(xiàng)目的時(shí)候有時(shí)候大家會(huì)用到scss這時(shí)候就需要安裝依賴sass-loader和node-sass，但是這倆個(gè)安裝是十分坑爹的，它們倆會(huì)由于這個(gè)版本匹配沖突的原因?qū)е逻\(yùn)行報(bào)錯(cuò)，當(dāng)時(shí)我在這個(gè)坑中踩了好久，接下來(lái)我把報(bào)錯(cuò)代碼獻(xiàn)上(圖文結(jié)合方便大家理解)
我這個(gè)vue項(xiàng)目已經(jīng)默認(rèn)安裝了 vue-style-loader，不要多此一舉。免得版本沖突。
到時(shí)候又會(huì)出現(xiàn)更多問(wè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)上說(shuō)是因?yàn)閟ass-loader安裝的版本太高，卸載重新安裝低版本即可，網(wǎng)上大部分都是安裝的7的版本，我裝的是7.3.1
解決方法
很簡(jiǎn)單如果你是我上面那種安裝方式之一而且正好報(bào)錯(cuò)的話請(qǐng)用我接下來(lái)獻(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)行成功有沒(méi)有很簡(jiǎn)單
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)
這篇文章主要介紹了使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)的相關(guān)資料,支持延遲顯示、手動(dòng)控制、響應(yīng)式內(nèi)容及圖片圖標(biāo)等功能,適用于Tooltip、Popover、關(guān)鍵詞推薦等場(chǎng)景,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07
vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)
本篇文章主要介紹了vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實(shí)現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預(yù)處理器，則可以使用/deep/， 如果/deep/ 無(wú)效，則使用 ::v-deep，本文給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue elementui select標(biāo)簽監(jiān)聽(tīng)change事件失效問(wèn)題
這篇文章主要介紹了vue elementui select標(biāo)簽監(jiān)聽(tīng)change事件失效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue如何自動(dòng)化打包測(cè)試環(huán)境和正式環(huán)境的dist/test文件
這篇文章主要介紹了vue如何自動(dòng)化打包測(cè)試環(huán)境和正式環(huán)境的dist/test文件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要介紹了Vue中四種操作dom方法，首先，在vue中強(qiáng)烈禁用原生與jquery來(lái)操作DOM元素。我們要充分的利用vue的優(yōu)勢(shì)：MVVM，在vue中程序員幾乎不操作DOM，只需要維護(hù)好數(shù)據(jù)即可，vue給程序員提供ref引用，不調(diào)用api直接獲取元素組件的使用2023-02-02
Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能實(shí)例
在Vue應(yīng)用中自定義指令是一種強(qiáng)大的功能,可以用于封裝DOM操作邏輯,這篇文章主要介紹了Vue3封裝全局自定義指令實(shí)現(xiàn)按鈕權(quán)限控制功能的相關(guān)資料,需要的朋友可以參考下2025-07-07
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實(shí)現(xiàn)樣式的作用域,本文小編就來(lái)分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08