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';`,
      },
    },
  },

// 结果出现了 Syntax Error: SassError: This file is already being loaded. 这个错误。原因是将这个scss文件重复引入了, 修改如下：

  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}`;
        },
      },
    },
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

node.js连接mysql与基本用法示例
这篇文章主要介绍了node.js连接mysql与基本用法,结合实例形式分析了nodejs中mysql模块的安装、引入、创建连接、sql语句执行等相关操作技巧,需要的朋友可以参考下
2019-01-01
npm与node版本不匹配问题解决思路及方法
当nodejs和npm的版本不匹配时,会出现一些奇怪的报错,这是因为npm与nodejs版本不兼容导致的,这篇文章主要给大家介绍了关于npm与node版本不匹配问题解决思路及方法的相关资料,需要的朋友可以参考下
2023-11-11
node-red教程之dashboard简介与输入型仪表板控件的使用
Node-red支持自定义节点，当然也就支持自定义图形化的节点。也有优秀的开发者把自己建立的图形化节点无偿分享。这里给出一个股票界面的例子，让大家看一看优秀的node-red界面能做到什么样子
2022-01-01
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
这篇文章主要介绍了如何正确使用Nodejs 的 c++ module 链接到 OpenSSL,需要的朋友可以参考下
2014-08-08
Node.js有效处理并发连接的过程
在现代 web 开发中,处理并发连接是一个对于构建高性能服务器至关重要的话题,Node.js 是一个使用 JavaScript 作为编程语言的服务器端环境,在这篇博客中,我们将深入探讨 Node.js 如何有效地管理并发连接,并提供一些示例代码以便于更好地理解这个过程
2024-10-10
npm install安装过程报错的实用解决办法
最近做项目遇到npm install 的问题,下面这篇文章主要给大家介绍了关于npm install安装过程报错的实用解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
node.js中的Socket.IO使用实例
这篇文章主要介绍了node.js中的Socket.IO使用实例,本文讲解了Socket.IO的安装、结合express来构建服务器、基本使用方法及一个网络聊天室的完整案例,需要的朋友可以参考下
2014-11-11
Node.js API详解之 module模块用法实例分析
这篇文章主要介绍了Node.js API详解之 module模块用法,结合实例形式分析了Node.js API中module模块基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
这篇文章主要介绍了NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
如何通过node.js来写接口详解
最近研究了一下nodejs写接口,发现接口并不难写,这篇文章主要给大家介绍了关于如何通过node.js来写接口的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
2022-09-09