一、问题

在跑Vue项目时,突然报错SassError: expected selector. /deep/ .xxx

请添加图片描述

二、原因

根据网上搜集到的答案猜测,可能是Sass-loader版本过高导致,但有以下几点疑问尚未解决

  • 1.前些天直接npm run serve 跑起来没问题,就今天突然不可以
  • 2.同样的代码,我的电脑会报这种错,同门的就不会
三、解决
方法1. 更换深度作用选择器

Vue-深度作用选择器
网上的答案大都是这个,即将 /deep/ 改为 ::v-deep 操作符——两者都是 >>> 的别名。
但在我的项目中,代码较多且有多个Vue文件用到深度选择器,一个一个改并不现实。

方法2. 降低Sass-loader版本

在该项目中,用到的Scss相关插件有:

"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",

sass-loader版本降低至7.0.0即可

npm uninstall sass-loader
npm cache clean --force //清除npm缓存
npm install sass-loader@7.0.0

完美运行

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐