前言

刚刚解决了一个困扰了我一个晚上的bug❌
起因是这样子的😢
重新要开始一个vue项目，从gitee上拉取
之前运行时，一直正正常常~
重新 npm install后便一直报错

Module build failed (from ./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js)

    /deep/ .el-select, .el-input, .el-cascader {
 ^
      Expected selector.
    ╷
486 │   /deep/ .el-select, .el-input, .el-cascader{
    │   ^
    ╵

所有的/deep/穿透全部报错了！

尝试

重装

1.重新安装node-sass和sass-loader

npm install node-sass sass-loader -S-D

不行，仍是报错

2.cpm重新安装

防止npm某些依赖包因网速而下载失败

cnpm install node-sass cnpm install sass-loader -D

一样挂了 安装时，有两个明显的错误

3.改变下载淘宝源

防止淘宝源资源老旧被丢弃

npm config set sass_binary_site=npm.taobao.org/mirrors/nod…

一样是bug！！接近崩溃

更改样式

将 /deep/ 更改为::v-deep 可以看看思否回答：segmentfault.com/q/101000002…

但该项目是我和师兄一起维护，不能单方面全局改动样式

解决

在sass-loader的官方文档中提到高版本不支持 /deep/ 穿透
所以估计得降低版本

降低版本1

npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.3.1 --save-dev

**还是一样报错，不支持 /deep/ **

最终解决

重新安装了node-sass并且将sass-loader降低至6.0版本

npm install --save-dev node-sass sass-loader@6.0.7

尾言

经常遇到突然重新npm install后
某些模块包不支持当前的语法了
这次记录提供一个bug解决思路
也要时刻关注更新换代即将被遗弃的语法了
希望~小伙伴们越来越少bug
遇到bug也简简单单解决！

记「css穿透失败」- 20.08.20

前言

尝试

重装