快捷導(dǎo)航

Node升級后vue項目node-sass報錯問題及解決

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

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

Node升級后vue項目node-sass報錯

node升級命令

npm install -g n
sudo n 16.14.0

升級后以前的vue 項目 node-sass 報錯

解決方案

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

npm uninstall node-sass sass-loader

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

npm update

3.安裝sass-loader與sass

npm install -D sass-loader@^10 sass

4.重新打包

npm run dev （如圖2）

5.Syntax Error: SassError: expected selector.

報錯信息表示 /deep/ 寫法的錯，修改為（如圖3）

若依vue前端node升級記錄

原來的node版本是

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

升級后node

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

升級后遇到的問題

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

// 結(jié)果出現(xiàn)了 Syntax Error: SassError: This file is already being loaded. 這個錯誤。原因是將這個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é)

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

您可能感興趣的文章:

相關(guān)文章

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