快捷導(dǎo)航

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

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

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

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

node升級命令

npm install -g n
sudo n 16.14.0

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

解決方案

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

npm uninstall node-sass sass-loader

2.升級項(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升級記錄

原來的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以后，運(yùn)行項(xiàng)目報(bào)錯(cuò)，原來項(xiàng)目里全局引入scss文件的配置，sass-loader的版本對于這個(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)文章

一文教會(huì)你從Windows中完全刪除node.js
作為新手nodejs卸載后安裝就總出錯(cuò),下面這篇文章主要給大家介紹了關(guān)于如何從Windows中完全刪除node.js的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
node中的session的具體使用
這篇文章主要介紹了node中的session的具體使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Node.js插件的正確編寫方式
正如Node.js在官方說明文檔中所言，插件是以動(dòng)態(tài)方式進(jìn)行鏈接的共享式對象，能夠?qū)avaScript代碼與C/C++庫接駁起來。這意味著我們可以引用任何來自C/C++庫中的內(nèi)容，并通過創(chuàng)建插件的方式將其納入到Node.js當(dāng)中。
2014-08-08
node.js中的fs.readFile方法使用說明
這篇文章主要介紹了node.js中的fs.readFile方法使用說明,本文介紹了fs.readFile的方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下
2014-12-12
Node.js中文件系統(tǒng)fs模塊的使用及常用接口
fs是filesystem的縮寫，該模塊提供本地文件的讀寫能力，基本上是POSIX文件操作命令的簡單包裝。這篇文章主要介紹了Node.js中的文件系統(tǒng)fs模塊的使用,需要的朋友可以參考下
2020-03-03
typescript nodejs 依賴注入實(shí)現(xiàn)方法代碼詳解
今天分享的是用typescript語言實(shí)現(xiàn)的ioc模式，這邊用到的主要組件是 reflect-metadata 這個(gè)組件可以獲取或者設(shè)置元數(shù)據(jù)信息，接下來通過本文給大家介紹typescript nodejs 依賴注入實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-07-07
npm?工具庫?yenv使用簡介
這篇文章主要為大家介紹了npm?工具庫?yenv使用簡介，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Node.js之網(wǎng)絡(luò)通訊模塊實(shí)現(xiàn)淺析
本篇文章主要介紹了Node.js之網(wǎng)絡(luò)通訊模塊實(shí)現(xiàn)淺析，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-04-04
node?NPM庫promise?異步任務(wù)狀態(tài)管理
這篇文章主要介紹了node?NPM庫promise?異步任務(wù)狀態(tài)管理
2023-07-07
使用nvm進(jìn)行多個(gè)nodejs版本的統(tǒng)一管理
隨著前端項(xiàng)目的越來越多,不同項(xiàng)目使用的nodejs版本可能不一樣,導(dǎo)致在切換不同項(xiàng)目時(shí)需要更換不同的nodejs版本,非常麻煩,本次推薦使用nvm進(jìn)行多個(gè)nodejs版本的統(tǒng)一管理,文中有詳細(xì)的圖文介紹,需要的朋友可以參考下
2023-12-12