vue2.x项目中关于/deep/ 突然不能被识别且报错的问题,记录笔记
前两天组里实习生突然说自己项目跑不起来了,报错信息大概类似
Module build failed (from ./node modules/sass-loader/dist/cjs.js):
SassError: expected selector.
/deep/::-webkit-scrollbar{
^
我第一反应是让他自查项目里的sass-loader
和node-sass
的版本是不是变了,本地环境是否有变化
但是他说没变,最近也没动过项目代码,今天突然就跑不起来了。
然后我尝试rebuild
包里的node-sass
,清除缓存重新安装依赖等等,均未生效。
再然后我把在其他同事中能正常运行的项目的node_modules
拷贝给他的机器上,依旧无效。
甚至在别人那能完美运行的整个项目在这都跑不起来。我怀疑他全局环境出现了问题...
后来我发现了大佬的这篇文章,跟这里遇到的问题几乎一模一样。
在项目的根目录运行启动 node ,输入 require.resolve('sass')
如果模块解析成功返回了 sass 包的路径,则说明 `sass-loader `错误地加载到了`sass`而不是 `node-sass` 。
require.resolve('sass')
果然发现他在自己的C盘里一份全局的node_modules
中的sass
路径
原因是 sass-loader
并不是解析项目的 package.json
而是直接在运行时里依次尝试加载 sass(dart-sass)、node-sass、sass-embedded
(sass 同个团队维护拥有相同 API 的版本,运行更快,但是需要 dart 的运行环境)
所以在项目里sass-loader
找到了可以依赖的sass
,所以没有使用node-sass
因为这份node_modules
是之前他误操作install的,所以移除之后 项目正常运行~
另:原作者推荐最好在 sass-loader 中指定 implementation 参数
的方式,防止这种乌龙出现
原作者的具体做法和排错历程异步这篇文章
做个笔记记录。
done
网友评论