首页 > 编程语言 >node14 升级 node16 后 vue2 项目中 sass 报错问题

node14 升级 node16 后 vue2 项目中 sass 报错问题

时间:2023-08-07 14:44:53浏览次数:31  
标签:node node14 sass node16 deep loader 报错

起因

不知道因为个什么手贱把之前的 node14 版本卸载了去官网重新下载安装了一下 node,最近版本升级到了 node16,以为应该不会有什么问题吧,结果把项目一跑,我勒个去,一堆飘红的,看控制台提示主要是这个 node-sass 报的错。

 

 

# 卸载
npm uninstall node-sass sass-loader
# 重新安装 
npm i sass-loader sass -D

npm install -D sass-loader@^10 sass

 

按照官方的说法,需要安装 10.x 版本的 sass-loader 以配合 webpack4,并卸载被 node16 抛弃的 node-sass ,取而代之安装 sass 即可解决问题。

等等,可能还没完,如果你项目中有用 /deep/ 选择器可能还会报一个 SassError: expected selector. 的问题,比如我这个大冤种全都是使用 /deep/ 来更改 element-ui 中的样式,这时候需要将 /deep/ 替换成 ::v-deep:

/* 报错: */
/deep/ .el-drawer__header {
	padding: 0;
    margin: 0;
}

/* 修改后解决: */
::v-deep .el-drawer__header {
	padding: 0;
    margin: 0;
}

 

简单升级一下 node 版本带来这么多坑可真简单啊! 

标签:node,node14,sass,node16,deep,loader,报错
From: https://www.cnblogs.com/yeminglong/p/17611404.html

相关文章

  • ubuntu系统升级软件sudo apt upgrade后GPU崩溃报错,显示驱动版本不匹配——ubuntu系统
     ubuntu系统升级软件(sudoaptupgrade)后,GPU崩溃报错,查看系统日志: Aug206:25:02lcwtrsyslogd:[originsoftware="rsyslogd"swVersion="8.32.0"x-pid="2059"x-info="http://www.rsyslog.com"]rsyslogdwasHUPedAug207:17:01lcwtCRON......
  • vue报错 Multiple assets emit different content to the same filename index.html
    vue-cli版本:@vue/[email protected]报错现象:想把css和script全部内嵌到html文件中,就用了"HtmlInlineScriptPlugin"插件,打包后js代码被嵌到了head里,导致代码提前执行找不到#app,再配置HtmlWebpackPlugin插件通过inject:"body"指定代码内嵌到body,打包报错"Multipleassetsemitdiff......
  • 解决报错:Redis ERR unknown command ‘FLUSHDB‘
    RedisERRunknowncommand‘FLUSHDB’报错信息:ERRunknowncommand`flushdb`ERRunknowncommand`flushall`解决方案:我的redis版本是5.0.7修改配置文件打开/etc/redis/redis.conf文件,将下面两行代码注释掉rename-commandFLUSHALL37_dba_FLUSHALLrename-commandFLUSHDB......
  • 【错误记录】PySpark 运行报错 ( Did not find winutils.exe | HADOOP_HOME and hadoo
    文章目录一、报错信息二、解决方案(安装Hadoop运行环境)一、报错信息核心报错信息:WARNShell:Didnotfindwinutils.exe:java.io.FileNotFoundException:java.io.FileNotFoundException:HADOOP_HOMEandhadoop.home.dirareunset.在PyCharm中,调用PySpark执......
  • 【HMS Core】推送报错907135701、分析数据查看
    ​【关键字】HMS、推送服务、分析服务 【问题描述1】集成推送服务,获取Token时报错907135701:scopelistempty 【解决方案】907135701OpenGW没有配置Scope1、您可以检查下网络是否有问题,手机是否可以正常连接互联网2、查看推送服务开关是否正常打开​​ 【问题......
  • bazel test 编译失败:googletest、gtest 报错
    问题描述bazeltest遇到很多奇怪的编译错误,报错位置位于“googletest”目录,而且没有修改过googletest源码:ERROR:/bazel_cache/output_user_root/.../external/google/BUILD.bazel:80:11:Compilinggoogletest/src/gtest-matchers.ccfailed:(Exit1):gccfailed:errore......
  • bazel 使用 gtest/gmock 报错 Constraints from @bazel_tools//platforms have been r
    问题描述运行bazeltest命令,遇到错误:“Constraintsfrom@bazel_tools//platformshavebeenremoved.Pleaseuseconstraintsfrom@platformsrepositoryembeddedinBazel,orpreferablydeclaredependencyonhttps://github.com/bazelbuild/platforms.Seehttps://gi......
  • tensorflow 版本不同 报错合集
    1、"AttributeError:module'tensorflow'hasnoattribute'random_normal'"问题解决办法使用importtensorflow.compat.v1astftf.disable_v2_behavior()替换importtensorflowastf 2、tensorflow.python.framework.errors_impl.InvalidArgume......
  • vue 开源项目 安装脚手架报错问题 ERESOLVE unable to resolve dependency tree
       在安装项目依赖时,很大可能会遇到安装不成功的问题,其中有一个很大的原因,可能就是因为你的npm版本导致的 使用--force或--legacy-peer-deps可解决这种情况。--force会无视冲突,并强制获取远端npm库资源,当有资源冲突时覆盖掉原先的版本。--legacy-peer-deps标志是在v7......
  • 解决 Dapper.Contrib 报错“值对于 Int32 太大或太小”问题
    需求:在使用Dapper.Contrib执行Insert方法的时候,插入单条数据对于自增主键字段的返回值为插入后的值,当返回值大于2147483647的时候,Dapper.Contrib会抛出异常“值对于Int32太大或太小”问题。使用Dapper.Contrib插入数据的时候,报错“值对于Int32太大或太小”,此时数据库......