node升級后,打包項目報node-sass錯誤的解決辦法


在node官網下載時官方會推薦16.x的版本,安裝完對電腦上已有項目進行打包,會報webpack、node-sass、sass-loader等依賴版本沖突;根據node-sass官網的說法,不同的node版本需要安裝不同的node-sass版本,並且node-sass已經廢棄,推薦使用Dart Sasst替代,Dart Sass在npm中的包名就是sass;

1.卸載原有的node-sass與sass-loader

npm uninstall node-sass sass-loader

2.升級項目所有安裝的依賴

npm update

3.安裝sass-loader(10.x版本)與sass(我的webpack版本是5.10.0)

npm install -D sass-loader@^10 sass

4.再次打包會報錯Error: SassError: expected selector;

這是因為項目中樣式有用 /deep/ ;如果使用 less 對 css 做出預處理的話,使用 /deep/ 就可以完成樣式穿透的行為;如果使用的 scss 對 css 做出的預處理,不能夠使用 /deep/ 而應該使用 ::v-deep 才對,於是我便用 ::v-deep 替換了 /deep/ 就解決了這個問題。

5.再次npm run  dev發現報

這個問題出現的原因是sass版本不對,需要npm uninstall sass;再次安裝 npm install --save-dev sass@1.32.12,在運行程序問題解決啦(解決問題的整個過程都不需要在vue.config.js中配置任何東西!!!!!!!!!!!!!!!!!!)。


免責聲明!

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



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