美文网首页
vue sass-loader /deep/ 报错fixed

vue sass-loader /deep/ 报错fixed

作者: Leonmmmmm | 来源:发表于2022-05-17 10:38 被阅读0次

    vue2.x项目中关于/deep/ 突然不能被识别且报错的问题,记录笔记

    前两天组里实习生突然说自己项目跑不起来了,报错信息大概类似

    Module build failed (from ./node modules/sass-loader/dist/cjs.js):
    SassError: expected selector.
    /deep/::-webkit-scrollbar{
    ^
    

    我第一反应是让他自查项目里的sass-loadernode-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

    相关文章

      网友评论

          本文标题:vue sass-loader /deep/ 报错fixed

          本文链接:https://www.haomeiwen.com/subject/hangurtx.html