在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中配置任何東西!!!!!!!!!!!!!!!!!!)。