Node升級(jí)后vue項(xiàng)目node-sass報(bào)錯(cuò)問題及解決

更新時(shí)間：2023年03月29日 09:52:20 作者：﹏゛Aeljinh陌琳

這篇文章主要介紹了Node升級(jí)后vue項(xiàng)目node-sass報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Node升級(jí)后vue項(xiàng)目node-sass報(bào)錯(cuò)

node升級(jí)命令

npm install -g n
sudo n 16.14.0

升級(jí)后以前的vue 項(xiàng)目 node-sass 報(bào)錯(cuò)

解決方案

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

npm uninstall node-sass sass-loader

2.升級(jí)項(xiàng)目所有安裝的依賴

npm update

3.安裝sass-loader與sass

npm install -D sass-loader@^10 sass

4.重新打包

npm run dev （如圖2）

5.Syntax Error: SassError: expected selector.

報(bào)錯(cuò)信息表示 /deep/ 寫法的錯(cuò)，修改為（如圖3）

若依vue前端node升級(jí)記錄

原來的node版本是

node: 14.9.0
node-sass: 4.14.1
sass-loader: 8.0.2

升級(jí)后node

node: 15.8.0
node-sass: 6.0.1
sass-loader: 10.3.1

升級(jí)后遇到的問題

// 在安裝完合適的sass-loader以后，運(yùn)行項(xiàng)目報(bào)錯(cuò)，原來項(xiàng)目里全局引入scss文件的配置，sass-loader的版本對(duì)于這個(gè)在文件之前追加scss代碼的選項(xiàng)名均有不同
sass-loader v8-，這個(gè)選項(xiàng)名是 “data”
sass-loader v8 中，這個(gè)選項(xiàng)名是 “prependData”
sass-loader v10+，這個(gè)選項(xiàng)名是 “additionalData”? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? additionalData: `@import '@/assets/styles/variables.scss';`,
? ? ? },
? ? },
? },

// 結(jié)果出現(xiàn)了 Syntax Error: SassError: This file is already being loaded. 這個(gè)錯(cuò)誤。原因是將這個(gè)scss文件重復(fù)引入了, 修改如下：

? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? // additionalData: `@import '@/assets/styles/variables.scss';`,
? ? ? ? additionalData: (content, loaderContext) => {
? ? ? ? ? const { resourcePath } = loaderContext;
? ? ? ? ? if (resourcePath.endsWith("variables.scss")) return content;
? ? ? ? ? return `@import "@/assets/styles/variables.scss";?
? ? ? ? ? ${content}`;
? ? ? ? },
? ? ? },
? ? },
? },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Nodejs進(jìn)階：核心模塊net入門學(xué)習(xí)與實(shí)例講解
本篇文章主要是介紹了Nodejs之NET模塊，net模塊是同樣是nodejs的核心模塊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-11-11
Node.js安裝教程和NPM包管理器使用詳解
這篇文章主要介紹了Node.js安裝教程和NPM包管理器使用詳解,安裝部分講解了Windows、和MAC OS下的安裝圖解,并介紹了Linux下的源碼安裝方法,最后對(duì)NPM包管理器做了詳細(xì)介紹,需要的朋友可以參考下
2014-08-08
node安裝--linux下的快速安裝教程
本篇文章主要介紹了node安裝--linux下的快速安裝教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
node.js平臺(tái)下的mysql數(shù)據(jù)庫(kù)配置及連接
本文主要介紹了node.js平臺(tái)下的mysql數(shù)據(jù)庫(kù)配置及連接的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-03-03
node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例
這篇文章主要介紹了node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
node.js卸載并重新安裝的方法步驟
本文詳細(xì)介紹了Node.js的卸載和重新安裝步驟,包括進(jìn)入控制面板卸載程序,手動(dòng)刪除文件夾,清理環(huán)境變量,以及如何重新下載并安裝Node.js,提供了詳細(xì)的操作指導(dǎo)和安裝Node.js的官方下載地址,確保用戶能夠順利完成Node.js的更新或重裝過程,感興趣的可以了解一下
2024-11-11
nodejs獲取本機(jī)內(nèi)網(wǎng)和外網(wǎng)ip地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了nodejs獲取本機(jī)內(nèi)網(wǎng)和外網(wǎng)ip地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2014-06-06
詳解基于Node.js的HTTP/2 Server實(shí)踐
HTTP/2目前已經(jīng)逐漸的在各大網(wǎng)站上開始使用，這篇文章主要介紹了詳解基于Node.js的HTTP/2 Server實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Node.js如何實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池
文章介紹了Node.js中實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池的方法,通過預(yù)先建立和管理數(shù)據(jù)庫(kù)連接對(duì)象,優(yōu)化數(shù)據(jù)庫(kù)連接的使用效率
2024-11-11
npm 常用命令詳解(小結(jié))
這篇文章主要介紹了npm 常用命令詳解(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01