解決vue中使用scss時,依賴node-sass和sass-loader的版本問題:


解決vue中使用scss時,依賴node-sass和sass-loader的版本問題:

前言

  為什么同樣的代碼,同樣的操作,在他電腦上就能運行出來,在我的電腦上就運行不出來?那有沒有考慮版本問題呢!我在學Vue的過程中就被版本問題狠狠地折磨了一次。
  下面我將針對這個node-sass和sass-loader的版本問題,提供一個較為可靠的解決思路,希望能幫助到將來碰到這個問題的朋友。

1、問題引入

  我是一個vue新手,今天在學習vue的時候需要寫樣式,然后用的是scss語法,在使用之前需要先安裝兩個依賴node-sass和sass-loader,我是看網上視頻教程跟着教程學的,教程里面的老師使用的是下面的指令:

npm install sass-loader node-sass --save-dev

  並且他安裝成功了,我看到npm默認給他裝的是 sass-loader 7.1.0,node-sass 4.11.0 ,隨后他啟動了項目,沒有報錯,樣式也成功加載了。我也就照葫蘆畫瓢,用了這個指令,兩個依賴也正常的裝上了,npm給我默認裝的是sass-loader 10.1.0和node-sass 5.0.0,原來npm不加版本號的話就會默認下載最新版的依賴,教程是18年2月份出的,所以據距今19個月了,這期間這兩個依賴都經過了迅速的發展,更新了幾個大版本。
  抱着試一試的心態,版本最新就最新吧,說不定也照樣能運行呢,可就當我寫完css代碼,啟動項目的時候,卻報了如下錯誤:在這里插入圖片描述
  先看看這個報錯什么意思(我也是愣了半天):項目編譯到20%的時候提示sass-loader包下的js代碼有問題,然后又是一通百度搜索,最終確定這就是node-sass和sass-loader的版本太高導致的。於是我首先嘗試了 視頻教程里面老師用的版本 sass-loader 7.1.0,node-sass 4.11.0,我把版本改成一樣的,總能運行了吧。結果卻不如人意,npm在下載的過程中去跟站點請求數據的時候報了404錯誤。納尼,還有這種事情?我重試了幾次之后還是一樣的問題。
  我心里想着,不行的話就再換其他版本吧,百度了一番,看了一些博客,一些熱心的網友在面對這個問題的時候,給出了他們當時解決問題后,項目正常運行時的版本號。
我試了下面幾個版本組合(有些版本沒有列出來)。

sass-loader 4.1.1,node-sass 4.3.0
sass-loader 7.0.3,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.7.2

  結果很不幸,上面幾個低版本的庫我要不就是裝上了依然報各種莫名其妙的錯,要不就是請求安裝數據的時候報了站點404的錯誤,然后安裝都失敗了。
  然后又是各種百度,前前后后又是一個多小時,問題依然沒有解決。
終於我在不經意間發現了的npm下載報404錯誤的站點指向了github,我順着這個線索在GitHub上找到了官方維護的sass-loader和node-sass的庫,官方發了好多個版本,如下圖所示。
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
  經過觀察官方發布這些庫的歷史版本號可以了解到,官方發布的版本號並不是連續的,有些版本與版本之間跨度比較大,甚至有些版本官方比如 node-sass 4.11.0 這個版本的庫還是缺失的(難道是官方刪除了?),這就解釋了為什么剛才我去使用npm安裝的時候會出現站點404異常,對此有疑惑的小伙伴可以去嘗試使用npm裝下 node-sass 4.11.0。可能之前還能下載到,現在確實被刪了,導致下載不到了,太坑了吧。

2、問題解決

  經過試驗,我在歷史版本庫中找到了sass-loader 7.3.1和node-sass 4.14.1,安裝成功,然后啟動項目,也沒有報錯,問題完美解決。對應的指令如下,供大家參考。

npm uninstall sass-loader node-sass    //卸載
npm install sass-loader@7.3.1 node-sass@4.14.1  --save-dev  //安裝對應的版本

  附上執行成功的截圖:
在這里插入圖片描述

  如果某一天我給出的版本也解決不了問題,說不定是官方又刪除了庫文件,不妨去官方的github倉庫去尋找合適的版本
  node-sass: https://github.com/sass/node-sass/tags
  sass-loader: https://github.com/webpack-contrib/sass-loader/tags

3、總結:

  以后再碰到npm install sass-loader node-sass --save-dev諸如這種無腦復制執行安裝的命令的時候多留心軟件或者庫文件版本號之間的差異,說不定可以換個版本代碼就能跑通了。
  當然嘗試改版本的過程中有一部分是運氣的成分,祝后續開發者在后面碰到版本問題可以一次就找對,項目一次就運行成功!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM